Next 프로젝트에서의 Dot Env(.env) 설정하기

배경

• 지금까지 .env 파일은 그냥 설정을 해주는 파일이구나 하는 정도로만 알고 있었음.
• 그런데 이번 프로젝트를 하면서 api 통신을 위해 변수 설정을 해줄 일이 있었는데, 보안을 위해 .env 파일이 필수적이라는 것을 깨달았음.
• 감사하게도 Next.js 에서 .env 설정하는 법 관련 자료가 많이 있어서 정리해 봄.

Next.js 에서의 .env 설정

• 단순하게 NextJS 프로젝트 최상단 폴더에서 .env 파일을 만들면 됨.
• 접두사
  • React 컴포넌트에서 액세스해야 하는 환경 변수가 있는 경우 NEXT PUBLIC 라는 접두사를 사용하면 됨.
  • 서버 측에서만 사용해야 하는 변수가 있는 경우  NEXT PUBLIC 같은 접두사를 붙히지 않으면 됨.
• env-cmd 라이브러리도 사용 가능
• Docs에도 관련 설명이 잘 되어 있음.
  • 아래의 내용들은 프로젝트에 필요했던 내용들을 정리한 것임.
    • Next에는 환경 변수 지원 기능이 내장되어 있음.
    • 환경 변수를 로드하기 위해 .env.local 을 사용해야 함
      • 자동으로 Node.js 환경에 로드되어서, 바로 사용할 수 있음
      • process.env 의 형식은 표준 자바스크립트 오브젝트가 아니라서, 객체구조해체를 활용할 수 없음. e.g. process.env.PUBLISHABLE_KEY, not const { PUBLISHABLE_KEY } = process.env.
        
      • src 폴더 구조를 사용하는 경우, Next.js 는 env 파일을 src 폴더가 아닌 부모 폴더에만 로드함.
    • 브라우저에 환경변수를 드러내기 위해서는 'NEXT PUBLIC ' prefix를 사용해야 함
      • 일반적으로 .env.local 파일만 있으면 됨
      • default 값을 정의하고 싶을 때에만 env.development와 env.development 파일을 사용
      • env.development 파일은 default 변수들을 정의하기 때문에 github에 올라가야 하고, .env.local 파일은 secret 변수들이 저장되기 때문에 gitignore에 추가되어야 함.
• dot env 파일 구조 예시

  # TWITCH API
  TWITCH_CLIENT_ID=${Twitch API Client ID}
  TWITCH_CLIENT_SECRET=${Twitch API Client Secret}
  ...
  TWITCH_APP_ACCESS_TOKEN_EXAMPLE=${Twitch API App Access Token}
  
  # ... API
  API_SECRET_KEY=${API Secret Key}
  NEXT_PUBLIC_API_POST_KEY=${Same Key as Django's API_POST_KEY}
  NEXT_PUBLIC_API=${...API Base Url}
  NEXT_PUBLIC_IMAGE_API=${...CDN Base Url}
  
  # Google Tag Manager
  NEXT_PUBLIC_GOOGLE_ANALYTICS=${Google Tag Manager Container}

배우고 느낀 점

• 보안 관련 부분이라서 매우 중요한 부분인데 그 동안 이를 간과하고 있었음 -> 다음에 dot env 파일을 다시 생성할 일이 있다면 더욱 잘 찾아본 후에 진행하기
• 모르는 부분을 대충 넘기는 것보다 확실하게 짚고 넘어가는 것이 전체적으로 봤을 때 가장 효율적이라는 것 명심하기