https://nextjs.org/docs/basic-features/environment-variables 부분 부분 번역 진행하였습니다.

😝 Next.js의 환경 변수

Next.js에는 환경 변수에 관한 기능이 내장되어 있어 아래와 같은 기능들을 수행할 수 있습니다.

• .env.local을 사용하여 환경 변수 로드하기
• NEXT_PUBLIC_ 접두사를 이용하여 브라우저에 노출하기

아래에서 Next.js의 환경변수에 대해 조금 더 깊게 다뤄보겠습니다!

환경 변수 로드하기

Next.js에는 .env.local에서 process.env로 환경 변수를 로드하는 기능이 내장되어 있습니다.

Node.js 환경에 자동으로 로드되어 사용할 수 있습니다.

👻 내가 자바스크립트 표준 객체로 보이니…? .env를 호출할 때 process.env.~ 로 보이지만, 환경 변수는 표준 자바스크립트 객체가 아니기 때문에 접근하는 방식에 주의할 필요가 있습니다.

const KEY = process.env.KEY; // OK!
const {KEY} = process.env;   // 안 된다!!

🧨 환경 변수에도 순서가 있찌 환경 변수 내부에 있는 값도 $VAR 와 같은 방식으로 참조할 수 있습니다.

# .env
HOSTNAME=localhost
PORT=8080
HOST=http://$HOSTNAME:$PORT

⚠️ 주의 Next.js는 /src 의 상위 폴더에만 사용할 수 있습니다.

브라우저에서 환경 변수 사용 시 NEXT_PUBLIC_ 을 붙여 사용하기