[Next.js] 여러 실행 명령어와 그에 따른 환경 변수 파일

Next.js의 실행 명령어

 

next dev

개발 모드로 Next.js 앱을 실행

실시간으로 코드 변경이 반영되고, 빠른 빌드와 핫 리로딩을 제공

 

핫 리로딩 - 코드 변경 사항을 저장할 때 애플리케이션을 다시 시작하지 않아도 변경 사항을 적용하는 기능

                     양식에 입력한 값이나 페이지 상태가 변경 없이 그대로 유지

라이브 리로딩 - 코드 변경 사항을 저장할 때 브라우저가 페이지를 새로고침 해서 페이지의 변경사항을 적용하는 기능

 

next build

앱을 배포할 준비가 된 프로덕션 빌드가 생성

최적화 및 번들링 수행 → 이 단계에서 소스 코드가 압축되고 최적화되어 ./next 폴더에 저장

번들링 - 여러 개의 소스 파일을 하나의 파일이나 여러 개의 묶음으로 합치는 과정

                    Next.js에서는 각 페이지 별로 필요한 코드만 번들링하고,

                    사용하지 않는 코드는 제거하여 번들의 크기를 줄임.

 

next start

next build로 생성된 프로덕션 빌드 실행

next dev와 다르게 핫 리로딩의 개발 기능 미제공

 

 

실행 방식에 다른 환경 변수 파일

 

next dev 실행 시

1. .env.development.local
2. .env.local
3. .env.development
4. .env

 

next build 및 next start 실행 시

1. .env.production.local
2. .env.local.
3. .env.production
4. .env

 

 

환경 변수 파일을 지정해서 build 및 start 하는 방법\

추가 예정.

 

 

결론

깃을 사용해서 형상관리를 하는 과정에서 .env.local 파일 하나만 가지고 API 호출 주소 등을 저장하고 있었는데, AWS내의 서비스에서 호출하는 API 주소는 도메인이 아닌 IP를 불러야 해서 환경 변수 파일을 여러 개로 구성해야할 필요가 있었고 선임분께서 환경 변수 파일과 Next.js 실행 방식의 관계를 알고 있느냐 여쭈어보셔서 정리해보게 되었다. 

이후에 실제로 개발 서버와 배포 서버를 나누어 관리를 하게 된다면 build 및 start 과정에서 빌드 방식에 의한 우선 순위가 아닌 원하는 환경 변수 파일을 지정할 수 있도록 구성할 계획이며, 구성이 완료된 이후 블로그 내용 추가할 예정이다.