Dot env in Next.js

지금까지 .env 파일은 그냥 설정을 해주는 파일이구나 하는 정도로만 알고 있었다.

그런데 이번 프로젝트를 하면서 api 통신을 위해 변수 설정을 해줄 일이 있었는데, 보안을 위해 .env 파일이 필수적이라는 것을 깨달았다.

감사하게도 Next.js 에서 .env 설정하는 법을 잘 설명해 준 블로그 글들이 많이 있었고, Docs에도 잘 나와 있었다.

참고 사이트

https://cpro95.tistory.com/464

https://jineecode.tistory.com/250

https://jayprogram.tistory.com/89

https://taenami.tistory.com/26

위의 참고 사이트들에서는 아래의 내용과 더불어 Next에서의 환경변수 설정 관련하여 상세하게 설명해주고 있다.

• 단순하게 NextJS 프로젝트 최상단 폴더에서 .env 파일을 만들면 됩니다.
• 접두사 즉, React 컴포넌트에서 액세스해야 하는 환경 변수가 있는 경우 NEXTPUBLIC 라는 접두사를 사용하시면 되고, 서버 측에서만 사용해야 하는 변수가 있는 경우  NEXTPUBLIC 같은 접두사를 붙히지 않으면 됩니다.
  
• env-cmd 라이브러리 사용 가능

Docs에도 관련 설명이 잘 되어 있다.

https://nextjs.org/docs/basic-features/environment-variables

아래의 내용들은 프로젝트에 필요했던 내용들을 정리한 것이다.

• Next에는 환경 변수 지원 기능이 내장되어 있음.
• 환경 변수를 로드하기 위해 .env.local 을 사용해야 함
  • 자동으로 Node.js 환경에 로드되어서, 바로 사용할 수 있음
  • process.env 의 형식은 표준 자바스크립트 오브젝트가 아니라서, 객체구조해체를 활용할 수 없음. e.g. process.env.PUBLISHABLE_KEY, not const { PUBLISHABLE_KEY } = process.env.
    
  • src 폴더 구조를 사용하는 경우, Next.js 는 env 파일을 src 폴더가 아닌 부모 폴더에만 로드함.
• 브라우저에 환경변수를 드러내기 위해서는 ‘NEXTPUBLIC’ prefix를 사용해야 함
  • 일반적으로 .env.local 파일만 있으면 됨
  • default 값을 정의하고 싶을 때에만 env.development와 env.development 파일을 사용
  • env.development와 env.development 파일은 default 변수들을 정의하기 때문에 github에 올라가야 하고, .env.local 파일은 secret 변수들이 저장되기 때문에 gitignore에 추가되어야 한다.