[생활코딩] Next.js - 빌드 및 배포

Sungw__k·2023년 8월 7일
post-thumbnail

개발중인 NextJS 앱에서 크롬 개발자도구를 열고 네트워크 탭을 확인해보면 가장 밑에 6.4MB라고 쓰여있는데 이는 서버에서 클라이언트에서 전송한 용량을 의미한다. 이는 비효율적으로 크기때문에 우리는 배포 전에 실서버에 최적화된 버전이 필요하다.

package.json 파일을 보면 NodeJS기반의 프로젝트들은 scripts 태그 안에 프로젝트를 유지보수하기 위한 명령어들이 적혀있다. npm run dev를 터미널에 입력하면 저 안에 있는 next dev 명령이 실행되는 것이다. 아래에 build는 프로젝트의 배포 버전을 만드는 명령이고 start는 이를 서비스하는 명령이다.




따라서 배포를 위한 개발이 완료됐다고 가정하고 개발환경을 끈 후 빌드를 해야하는데 이때 개발환경을 끄기 위해 터미널에서 Ctrl+C를 눌러준다.

npm run build

그리고 앞서 말한 프로젝트 빌드를 위한 위의 명령어를 터미널에 입력해주면 배포버전이 .next폴더에 만들어진다.

npm run start

그리고 위의 명령어를 통해 .next에 저장된 내용을 서비스해줄 수 있는데 이를 크롬 개발자도구에서 확인해보면

서버에서 클라이언트로 보낸 용량이 20분의1 가량 줄어든것을 확인할 수 있다.

0개의 댓글