로고
nabongsun.shop
낮
/
밤

[nextJS] 포트폴리오 만들기(1)

어느 회사에 면접을 보러갔다가, nextJS에 대해 알게되었다. 해당 기술스택을 향상시킬겸, 기존 포트폴리오가 부실한것 같아, nextJS로 포트폴리오를 만들기로 했다.

1. nextJS가 뭔데?

기본적으로 SSR 위주의 풀스택 기반 프레임워크를 주력으로 성장하고 있으며, 풀스택 프레임워크답게 API 기능 및 서버 컴포넌트를 통한 서버측 기능과, React 컴포넌트를 통한 클라이언트 기능으로 나뉘어 통합 제공하는 프레임워크이다. 현재 node.js 기반의 안정적인 풀스택 프레임워크로 사랑받고 있으며, SSG 방식 또한 제공한다. react 공식 시작하기 문서를 열람할 시, 가장 먼저 이 Next.js 프레임워크를 통한 시작하기가 가장 상단에 표시될 정도로 React의 거의 대표급 프레임워크이다. [출처] 나무위키

라는데, React에서 파생된 SSR를 지원해주는 프레임워크? + 더 간단하게 홈페이지를 만들 수 있는 기능 이정도 인거같다.

[Next.js 많이 쓰는 이유를 알아보자] 라는 코딩애플님의 글을 참고해보자.

SEO(검색 엔진 최적화)를 높이기 위해선 홈페이지를 들어갈때 완성된 html파일을 보내주는 방식이 좋은데, 아무래도 React는 그부분에선 app태그 아래 페이지를 생성하는 방식이라,

다른 무언가를 해야된다! -> SSR을 하면 서버에서 어느정도 완성된(~~nextJS로 만들어진 홈페이지도 100% 서버에서 완성되는건 아닌거 같다! (뇌피셜))~~ 페이지를 보내줄테니 SEO에 좋겠구나!

라는 의식의 흐름대로 시작하게 되었다.

2. 엄청난 단점

nextJS로 페이지를 만들어보자! 라고 호기롭게 시작했지만 React의 방대한 자료량에 비하면 nextJS를 설명하는 자료는 절대적으로 부족했다... (이래서 글을 써보기로 했다.)

심지어 typescript랑 tailwind도 써보려고 했지만 이쪽관련 프로젝트는 이번이 처음이라 자료가 부족한게 엉청나게 다가왔다...

그렇게 부족한 자료를 뒤져가며 하나하나 짰지만, 대부분 글은 12,13버전글이고 14버전에 대한 자료는 진------짜 없는 수준이라 너무 힘들었다.

3. 그래서 버전은?

대부분의 글이 13버전? 일때의 자료이고 14버전을 지원하지 않는 모듈이 현재(24년 초)에 많이 있기 때문에, 13버전으로 할것이고, 그에따라 react버전도 최신버전에서 조금 떨어진? 버전을 사용할 것 같다.

"dependencies": {
    "contentlayer": "^0.2.6",
    "next": "12.2.2",
    "next-contentlayer": "^0.2.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },

4. 참고할만한 글

Next.js로 나만의 블로그 만들기 with 정적 생성 : 가장 도움이 많이 되었던 글(설명이 제일 자세하다)

Next.js getStaticProps 사용기 : 처음 보는 기능(getStaticProps)에 대해 설명이 잘되있었다!

넥스트,티 : SEO에대해 찾아보다가 발견한 홈페이지, 이번 프로젝트의 UI에 많이 참고가 되었다.

5. 프로젝트 시작

5.1 프로젝트 생성

npx create-next-app (프로젝트명)

5.2 설정?

√ Would you like to use TypeScript? ...  Yes
√ Would you like to use ESLint? ...  Yes
√ Would you like to use Tailwind CSS? ...  Yes
√ Would you like to use `src/` directory? ... No
√ Would you like to use App Router? (recommended) ...  Yes
√ Would you like to customize the default import alias (@/*)? ... No

5.3 버전 변경

  • package-lock.json 파일 삭제
  • node_modules 폴더 삭제
  • package.json 을 가보면, dependencies가 있을텐데, 아래걸로 수정

package.json

"dependencies": {
    "contentlayer": "^0.2.6",
    "next": "12.2.2",
    "next-contentlayer": "^0.2.6",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  • cd (프로젝트명) 해서 해당 프로젝트 안으로 들어가기
  • npm i 해서 dependencies 에있는 모듈 설치

출처: [React] create-react-app 리액트 버전 변경 및 에러 처리 방법

5.4 page 생성

nextJS는 신기하게 라우터를 구성을 안해도 디렉토리명을 바탕으로 알아서 라우터를 생성해준다.

/pages 폴더를 만들고 그아래 /pages/index.tsx , /pages/home/blog.tsx ...등등의 파일을 만들면 알아서 mysite/, mysite/home/blog 등등의 URL을 만들어 준다!

물론 동적라우팅이라는 것도있어서 /pages/[i] 를 만들면 mysite/a, mysite/b ... 등등의 페이지도 동적으로 만들 수 있다고 한다!

출처: [Next.js] 기본 & 다이나믹 라우팅 / 13버전 부터 달라진 점

그럼만들어보자.

pages/_app.tsx

import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;

이건 최상위 페이지이고,

pages/index.tsx

const Home = () => {
  return <div>Hello nextJS!</div>;
};

export default Home;

얘는 메인페이지로 만들 페이지 이다.

5.5 시작

npm run dev

이러면 조촐하지만 nextJS로 만든 첫 삽이 퍼지게 되었다! 다음글은, 헤더와 네비게이션을 만들것이다.