[Next.js 13] 설치, 빌드, 서버 구동 방법 (개발 모드/프로덕션 모드)

# Next.js 13 설치 방법

기본적으로 Node.js 16.8 이상이 설치된 상태에서 진행해야 한다.

(node.js 공식 홈페이지에 방문하여 OS에 맞는 설치파일을 다운로드 받아서 설치하면 된다.)

 

1. 설치

`create-next-app` 명령어를 사용하여 Next.js를 설치하면, 관련 설정까지 자동으로 세팅된다.

 

터미널에서 상에서 원하는 경로로 이동 후, 아래 명령어를 실행한다.

npx create-next-app@latest

 

만약 현재 경로 상에 설치하려면, 명령어 뒤에 마침표( . )를 하나 붙여준다.

npx create-next-app@latest .

 

2. 세팅

설치를 시작하면 터미널 상에서 몇가지 질문을 받게 된다.

프로젝트 이름, 사용할 라이브러리, 추가 설정에 관한 것으로 추천하는 옵션에 따옴표( " )를 표시해 두었다.

 

What is your project named? "your-project-name"
Would you like to use TypeScript? No / "Yes"
Would you like to use ESLint? No / "Yes"
Would you like to use Tailwind CSS? "No" / Yes
Would you like to use `src/` directory? No / "Yes"
Would you like to use App Router? (recommended) No / "Yes"
Would you like to customize the default import alias? "No" / Yes

 

각각에 대한 내용은 다음과 같다.

• Project Name: 사용할 프로젝트 이름을 기입한다.
• TypeScript: "YES" - 타입스크립트를 사용한다면 YES를 설정. NO를 택하면 Javascript를 사용하도록 세팅된다.
• ESLint: "YES" - ESLint 사용 설정
• `/src` directory:  "YES" - React 코드만 /src 폴더에 따로 작성하도록 세팅되어 가독성에 좋다. 필수는 아니다.
• Tailwind CSS:  "NO" - 부트스트랩 같은 CSS 프레임워크로 필요에 따라 선택하면 된다.
• App Router: "YES" - Next.js 13의 App Router 라우팅 시스템을 사용하겠다는 설정이다.
• import alias:  "NO" - import할 때 `@/경로`를 자동으로 `src/경로` 를 참조하도록 설정되어 편리한다. 나중에 수정 가능하다.

 

설치가 완료되면, 아래와 같은 작업들이 자동으로 세팅된다.

• 라이브러리 설치 : next@latest react@latest react-dom@latest 등
• 폴더 생성: /src, /app, /public 등
• 파일 생성: layout.tsx, page.tsx  등
• 설정 파일 생성 및 디폴트 세팅: package.json, tsconfig.json 등

 

물론 위의 모든 작업들을 매뉴얼로 손수 진행할 수도 있다.

이에 대해서는 공식문서 참고

 

---

# 서버 구동 및 빌드 방법

`package.json` 파일을 열어보면 아래와 같은 스크립트가 기본으로 작성되어 있다.

 

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

 

개발용 서버 구동, 프로덕션(배포용) 빌드 및 서버 구동을 하는 스크립트 들로,

`npm run 명령어`를 통해 실행할 수 있다. 

 

• dev: `next dev` 명령어를 실행하여, 개발 모드로 서버를 구동한다
• build: `next build` 명령어를 실행하여, 프로덕션(배포)용으로 코드를 빌드한다.
• start: `next start` 명령어를 실행하여, 프로덕션(배포) 용으로 빌드된 코드를 이용해 프로덕션 모드로 서버를 구동한다.
• lint: `next lint` 명령어를 실행하여, ESLint 관련 설정을 진행한다. (개인적으론 쓸 일이 별로 없었다)

참고로 start 는 run 없이 `npm start` 만 입력해도 실행된다.

( NPM 관련 참고글 : Node.js: NPM 명령어 정리, package.json(+scripts) 생성 및 사용 방법 )

 

1. 개발 서버 구동

개발 모드로 서버를 구동하면,

코드 수정할 때마다 바로바로 수정사항이 반영되어 확인할 수 있으며(HMR: Hot Module Reloading), 다양한 개발용 편의 기능이 제공된다.

 

개발 모드로 서버를 구동하려면,

터미널 상에서 프로젝트 루트 경로로 이동한 다음, 아래 명령어를 실행한다.

npm run dev

 

브라우저 상에서 `http://localhost:3000` 으로 접속하면 된다.(샘플 화면이 노출되면 성공!)

포트번호는 3000으로 기본 세팅되며, 변경도 가능하다.

(참고글: [Next.js 13] 서버 포트 번호 변경 방법 )

 

2. 프로덕션(배포용) 코드 빌드

프로덕션용으로 빌드하면,

개발자가 작성한 코드를 Server Side Rendering, Code Split은 물론, 실제 서비스 배포를 위한 각종 최적화가 완료된 상태로 코드를 만들어준다.

 

프로덕션 용으로 빌드하려면, 아래 명령어를 실행한다.

npm run build

 

빌드된 결과물은 /.next 폴더에 저장된다.

 

3. 프로덕션(배포용) 서버 구동

프로덕션 모드로 서버를 구동하면, 위에서 프로덕션 용으로 빌드한 코드를 사용해 서버가 구동된다.

(빌드된 코드에는 실제 서비스 배포에 필요한 다양한 최적화가 반영되어 있다)

 

아래의 명령어를 실행하면 된다.

npm start

---

관련 공식 문서: https://nextjs.org/docs/getting-started/installation