TIL | Nextjs 환경변수

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_POINT
  • browser 환경에서의 접근: 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

• Nextjs Environment Variables docs
• vercel nextjs github examples