Next.js

Next.js 배포

백단비 2023. 9. 20. 13:28
320x100

next build에 대해 적어놓기 위한 글

😳 왠 build?

👉 용량이 크다는 것은 비효율적이고 보안상에 문제가 생길 수도 있다고 한다.

👉 build 하나로 용량이 차이가 얼마나 나는가?

 

개발자 도구에서 network탭을 열어서 새로 고침을 누르고 맨 아래쪽을 보면

 6.6MB resources라고 나오는데 서버에서 클라이언트로 전송한 용량이 6.6MB나 된다.

 

 

👉 이부분은  package.json에 "scripts" 쪽에서 유지보수 할 수 있는데

"build"라는 명령어는 실제로 배포할때 배포판을 만들어주는 명령어이고, "start"는 배포판을 실행하기 위한 명령어이다.

build를 사용하면 최적화 해주기 때문에 용량을 줄일 수 있다고함.

 

👉 일단 해본다. 

npm run build 로 빌드를 해보면 배포판이 아래 .next 폴더에 만들어 진다.

 

 

그 후에 배포판을 실행하기 위해서 npm run start를 한 후에

개발자도구에서 전송 용량을 보면 301kB로 확 줄어든 것을 알 수 있다.

 

 

Vercel로 배포하면 vercel이 알아서 next.js를 감지하고 next build를 실행한다고 한다. 

아무래도 vercel이 만든거라서 너무 크거나 하지 않으면 vercel로 배포하는것이 괜찮을 듯 하다.

 


참고

https://opentutorials.org/course/5098

https://velog.io/@wolverine/%EB%B2%88%EC%97%AD-Next.js-%EB%B0%B0%ED%8F%AC-of0hthab

320x100

'Next.js' 카테고리의 다른 글

파일 기반 라우팅 (Feat. Page Router)  (0) 2024.05.17
Next.JS의 보호된 파일명  (0) 2024.05.03
server component와 client component  (0) 2023.06.28
NEXT의 pages  (0) 2023.06.28
NEXT.JS 설치  (0) 2023.06.28