[Next.js 시작하기] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다.
목차
- Next.js 란?
- Next.js 시작하기
- Next.js 라이브러리 세팅
- Next.js app & document 커스텀
Next.js 시작하기
프로젝트 생성
Next.js에서도 React에서 사용하는 creat-react-app과 같은 creact-next-app이라는 CLI를 제공하고 있으므로 꼭! 사용하는 것을 권장한다.
물론 메뉴얼 세팅 방법이 있지만, 다루지 않았으며, 하단에
참고 사이트를 참고 해주세요.
$ npx create-next-app
# or
$ yarn create next-app
이미 공식적으로 제공되는 boilerplate 들이존재하고, 프로젝트를 설치 할 때 자동 세팅을 지원하는 듯 하지만, Default Mode를 사용해서 설치하였습니다.
디렉토리 구조
next-mobx-boilerplate
├─ node_modules
└─ ...
├─ pages
└─ api
└─ hello.js
└─ index.js
├─ public
├─ node_modules
└─ pages
Page
Next.js에서 page는pages폴더에 리액트 컴포넌트 형태로 저장되어 있으며, 각 page들은 파일명을 기준으로 router와 연결되어 있습니다.
예시로 만약
pages/about.js파일을 생성하면,/about의 url 경로로 접속이 가능하게 됩니다.
동적 라우팅
pages/post/[pid].js
import { useRouter } from "next/router";
const Post = () => {
const router = useRouter();
const { pid } = router.query;
return <p>Post : {pid}</p>;
};
export default Post;
/post/abc
{ "pid": "abc" }
/post/abc?foo=bar
{ "foo": "bar", "pid": "abc" }
route 파라미터와 queryString이 같은 경우
/post/abc?pid=123
{ "pid": "abc" }
pages/post/[pid]/[comment].js
{ "pid": "abc", "comment": "a-comment" }
모든 라우트 불러오기
pages/post/[...slug].js 파일명을 다음과 같이 만들면, post/a 뿐만아니라 post/a/b 도 인식한다.
post/a/b
{ "slug": ["a", "b"] }
정리
pages/post/create.js- Will match/post/createpages/post/[pid].js- Will match/post/1,/post/abc, etc. But not/post/createpages/post/[...slug].js- Will match/post/1/2,/post/a/b/c, etc. But not/post/create,/post/abc