Next.js 13 - 3. 배포

Next.js 배포 방법

크롬 개발자 도구(F12)에서 Network 탭을 열고 refresh(F5)를 하면 아래 resource 용량이 나온다. 6.5MB는 매우 큰 용량이다. 그리고 콘솔창을 보면 개발에 필요한 여러 정보가 출력이 되는데 이건 비효율적이고 보안상의 문제가 있을 수 있다.

따라서 용량을 더 작게 줄이고 불필요하나 메시지를 출력하지 않는 실서버에 최적화된 버전이 필요하다.

 

{
  "name": "next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }
}

package.json을 보면 node.js를 기반으로 만들어진 프로젝트들은 scripts라고 적힌 아래에 유지보수에 필요한 명령어들이 작성되어 있다. 이 중 dev를 보면 next dev가 적혀있는데 아래 명령어를 실행했을 때 실제로 실행되는 명령어가 적혀있다.

 

npm run dev

pnpm run dev

 

그 외 build와 start가 있는데 build는 실서버 배포판을 만드는 명령어이며, start는 이 배포판을 서비스하는 명령어다.

npm run build

pnpm run build

 

.next 폴더는 개발을 하든, 실서버로 빌드를 하든 사용자에게 서비스되는 내용이 저장되는 폴더다. 따라서 build 명령어를 실행하게 되면 배포판이 .next라는 폴더에 만들어진다. 그리고 start 명령어로 실행하게 되면 이 .next 폴더 안에 있는 내용이 서비스 된다.

npm run start

pnpm run start

 

실행된 페이지에서 다시 개발자도구를 이용해서 네트워크탭을 확인해보면 아래와 같이 

이전에는 6.5MB였는데 지금은 297kB로 줄어든 것을 볼 수 있다. 약 21배 정도 용량의 차이가 나타나는데 실서버용의 배포판이 확실히 가벼워진 것을 볼 수 있다. 

 

npm run start로 실행 중인 서버가 실제로 next.js로 만든 프로젝트를 서비스하기 시작하는 것이기 때문에 start 명령어를 실행한 상태로 ip주소나 도메인을 사용자들에게 주면 배포도 끝났다고 볼 수 있다. 

 

---

참고자료

생활코딩 - Next.js 13

https://opentutorials.org/course/5098

Next.js 13 - 생활코딩