Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다.
1. create-next-app 패키지 이용
다음과 같이
create-next-app
패키지를 이용하면 Next.js 앱의 개발을 위해 필요한 대부분의 것들을 쉽게 설치할 수 있다.npm run dev
명령어를 실행하면http://localhost:3000
에서 개발 서버가 실행된다.
http://localhost:3000
에 접속하면 앱을 확인할 수 있다.
pages/index.js
파일을 수정하면 변동사항을 브라우저에서 바로 확인할 수 있다.
create-next-app
은 Node.js 패키지에 해당하며, npx
는 Node.js 패키지의 임시 설치 및 실행을 위한 도구이다. Node.js 패키지 및 npx
에 관한 자세한 내용은 여기를 참조하자.npm run dev
명령어의 실행은 실제로 next dev
명령어의 실행을 의미한다. 이에 대해서는 아래 섹션을 참조하자.2. 수동 설치
next
, react
, react-dom
패키지를 설치한다. Next.js는 React 기반의 웹 프레임워크이므로 React도 설치해야 한다.이제
npm run XXX
명령어의 실행을 설정하기 위해 package.json
파일을 열고 scripts
를 다음과 같이 수정한다.next dev
: 개발 환경을 위한 Next.js 서버를 실행한다.
next build
: 배포 환경을 위한 Next.js 앱을 빌드한다.
next start
: 배포 환경을 위한 Next.js 서버를 실행한다.
next lint
: Next.js의 자체 ESLint 구성을 설정한다.