환경 변수 설정
기본 설정
.env 파일: 모든 환경에서 공통적으로 사용되는 변수를 저장합니다.
.env.development / .env.production: 개발 및 프로덕션 환경에서만 사용되는 변수를 저장합니다. 각각 next dev와 next build를 실행할 때 로드됩니다.
.env.local: 로컬 개발 환경에서만 사용되며, 이 파일은 .env 파일보다 우선하여 로드되며, .gitignore에 추가되어 버전 관리 시스템에는 포함되지 않습니다.
환경 변수 접근
서버 측: process.env 객체를 통해 서버 측 코드에서 환경 변수에 접근할 수 있습니다.
클라이언트 측: 환경 변수를 브라우저에 노출하려면 변수 이름 앞에 NEXTPUBLIC 접두사를 붙여야 합니다 (예: NEXT_PUBLIC_API_KEY).
특수 사례
동적 조회 불가: 환경 변수는 코드에 정적으로 인라인되어야 하며, 동적 키로 접근하는 것은 지원되지 않습니다.
환경 변수 로드 순서
환경 변수는 다음 순서대로 로드됩니다:
.env.(NODE_ENV).local
.env.local (테스트 환경에서는 로드되지 않음)
.env.(NODE_ENV)
.env
이 순서를 통해, 각 환경에 특화된 설정을 우선적으로 적용할 수 있으며, 공통 설정은 가장 마지막에 적용됩니다.
주의사항
.env 파일은 공개적으로 접근이 가능하므로, 중요한 비밀 정보는 반드시 .env.local이나 서버 측 환경 설정에서만 관리해야 합니다.
환경 변수의 변경은 빌드 시에만 반영되므로, 변경 후에는 애플리케이션을 재빌드해야 합니다.
Vercel과의 연동
Next.js 애플리케이션을 Vercel로 배포할 때, 환경 변수는 Vercel 프로젝트 설정을 통해 관리할 수 있습니다. 이 환경 변수들은 로컬 개발에도 동일하게 적용될 수 있도록 vercel env pull 명령어를 사용하여 .env.local 파일로 가져올 수 있습니다.
next.config.js 설정
Next.js의 설정 파일 next.config.js를 통해 애플리케이션의 빌드와 동작을 세부적으로 조정할 수 있습니다. 예를 들어, reactStrictMode는 React의 엄격 모드를 활성화하여 개발 중 잠재적인 문제를 경고하고, swcMinify는 코드를 압축하여 성능을 최적화합니다.
참고
https://nextjs.org/docs/api-reference/next.config.js/environment-variables
https://vitejs-kr.github.io/guide/env-and-mode.html
https://han-py.tistory.com/507
