Next.js 사용하기

Nextjs를 사용하면 서버사이드 랜더링을 쉽게 해준다고 알려져있어서 이번 토이프로젝트에 적용하기 위해서 공식 문서를 찾아보면서 정리한 것들을 적어보려고 한다.

1. 프로젝트 만들기 및 실행

npx create-next-app nextjs-app
cd nextjs-app
npm run dev

npm run dev로 서버를 실행할 수 있으며, localhost:3000에 접속하여 구동되는 서버를 확인할 수 있다.

2. 기본 기능

Pages

pages 디렉토리 하위에 있는 react component들이 page이다. 각 page는 file name으로 라우팅되어서, pages/about.js 로 파일을 생성하면 /about 이라는 경로로 접근이 가능하다.

Dynaimic Routes

pages/posts/[id].js 로 파일 이름을 만들면 post/1, post/2로 접근할 수 있다.

Pre-rendering

기본 설정으로 Next.js는 모든 페이지를 pre-render 한다. HTML페이지를 클라이언트 사이드에서 그리는 것이 아니라, 서버에서 생성하기 때문에 SEO(서치엔진최적화)에 더 좋은 성능을 낸다. 

Two forms of Pre-rendering

Static Generation과 Server-side Rendering 둘다 사용하는 것이 가능하다. 

Server-side Rendering

getServerSideProps라는 async 함수를 export하면된다.