next13에서 환경변수를 로드할 때 undefined으로 로드되는 에러

문제 상황

process.env를 통해 환경변수를 불러왔을 때, undefined으로 나옴

next13에서는 process.env를 별도의 라이브러리 설치 없이 기본적으로 사용가능하다.

문제 원인 및 해결 방법

에러 방랑자(?) 당신의 에러도 다음 중 하나이길 바란다.

원인 1. process.env를 비구조화 할당을 통해 불러옴

env는 비구조화 할당을 통해 불러올 수 없다. 비구조화 할당을 풀어주도록 하자.

참고로 Dynamic Variables (동적 변수) 도 process.env에서는 먹히지 않으니 주의하도록 하자.

// Before
const { NEXT_PUBLIC_PRIVATE_KEY } = process.env;
// After
const PRIVATE_KEY = process.env.NEXT_PUBLIC_PRIVATE_KEY;

원인 2. 변수 앞에 NEXT_PUBLIC_을 적어주지 않음

브라우저 환경에서 환경변수를 사용하려면, NEXT_PUBLIC_이라는 접두사를 포함하여 변수 선언을 해줘야 한다. (Node.js에서 사용하고자 한다면 상관없다)

// Before
PRIVATE_KEY='very secret key'

// After
NEXT_PUBLIC_PRIVATE_KEY='very secret key'

원인 3. 코드에서 환경변수를 불러올 때 NEXT_PUBLIC_을 빼고 불러옴

내가 1시간동안 삽질한 결정적인 원인🔥
환경변수를 불러올 때도 접두사를 빼먹지 말고 적어주자.

// Before
const PRIVATE_KEY = process.env.PRIVATE_KEY;

// After
const PRIVATE_KEY = process.env.NEXT_PUBLIC_PRIVATE_KEY;

관련 문서

next13 blog : Environment Variables