[Next.js] 핵심 개념 익히기 - ① 프로젝트 설치하기

Next.js 공식 문서를 읽고, 필자가 생각하기에 Next.js에 대해 알고 있어야 하는 핵심 개념을 정리한 포스팅입니다. 실제로 Next.js 공식 문서를 살펴보면 생각보다 많은 내용이 있는데, 필자의 목적은 "Next.js가 무엇이냐"라는 질문에 대해 답을 할 수 있는 수준의 핵심 개념을 간추리는 것입니다. 더 자세한 내용은 개발하면서 그때그때 살펴보면 된다고 생각합니다.

 

1. create-next-app 패키지 이용

다음과 같이 create-next-app 패키지를 이용하면 Next.js 앱의 개발을 위해 필요한 대부분의 것들을 쉽게 설치할 수 있다.

npx create-next-app@latest

# TypeScript 프로젝트
npx create-next-app@latest --typescript

• 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 install next react react-dom

이제 npm run XXX 명령어의 실행을 설정하기 위해 package.json 파일을 열고 scripts를 다음과 같이 수정한다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

• next dev : 개발 환경을 위한 Next.js 서버를 실행한다.
• next build : 배포 환경을 위한 Next.js 앱을 빌드한다.
• next start : 배포 환경을 위한 Next.js 서버를 실행한다.
• next lint : Next.js의 자체 ESLint 구성을 설정한다.