Loading Environment Variables(node, browser)
- Next.js에서는, CRA처럼 환경 변수를 자체적으로 지원해준다.
- 기본적으로
.env.local파일 안에 선언된 환경 변수에는, process.env.변수명을 통해 접근할 수 있다.
API_END_POINT: examples => node 환경에서만 사용 가능
NEXT_PUBLIC_API_END_POINT: examples => 브라우저 환경에서 사용 가능
- 기본적으로
env.local 내부 선언된 모든 환경변수들은 Node.js환경에서만 사용할 수 있지만, 브라우저에서 사용하고자 할 경우 NEXT_PUBLIC_ 키워드를 붙여야 사용이 가능하다. ( SSR이 아닌, CSR 요소에 해당 환경변수를 사용하고자 할 경우 NEXT_PUBLIC_ 키워드가 꼭 필요하다.)
- 환경변수 사용 예시
node환경에서의 접근: process.env.API_END_POINTbrowser 환경에서의 접근: process.env.NEXT_PUBLIC_API_END_POINT
process.env는 표준 JS 객체가 아니므로, 구조분해 문법을 사용할 수 없다.
Default Environment Variables
- 일반적으로
.env.local 파일 하나만 필요하다. 그러나 development나 production
, 각각의 환경에 맞춰 특정 변수를 사용하고자 할 경우 env.development, env.production을 생성하여 각각 적용할 수 있다.
next dev: env.development의 환경 변수가 적용next start: env.production의 환경 변수가 적용
Reference