NEXT.js에서 API 키 등 환경변수 관리 방법 소개

[semteul]

참조하면 좋은 링크 (NEXT.js 공식 환경변수 설정 가이드) : https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables

NEXT.js 에서는 API 키와 같은 환경변수를 관리할 때 보통 프로젝트 폴더 루트에 .env로 시작하는 파일을 넣는다.

/.env.local

NEXT_PUBLIC_API_URL=http://localhost:3000
NEXT_PUBLIC_API_KEY=your-api-key

실제 Next.js 코드에서는

process.env.NEXT_PUBLIC_API_URL
process.env.NEXT_PUBLIC_API_KEY

로 NEXT.js 빌트인 기능에 의해 process.env.*로 .env.파일명에 파일명에 상관 없이 모든 환경변수들을 자동적으로 로딩한다.

실제 배포 시, 예를 들어 vercel에서 배포한다고 한다면 별도로 환경변수를 설정하는 UI가 있어서 거기에 하면 된다.

다른 환경에서 (예, docker로 클라우드에 배포하는 경우) 어떻게 하는지는 추가바람

.gitignore

NEXT.js에서는 프로젝트 생성시 알아서 .env*를 .gitignore에 포함시켜준다.