[Next.js] 환경 변수 사용하기 ( + 깃에 올리지 않는 법)

Next.js가 자체적으로 파일들을 통해 지원하는 환경 변수들

• Next.js는 프로젝트 폴더에 존재하는 환경변수 파일(.env*) 로부터 변수들을 읽어서 Node.js 환경의 process.env객체에 주입한다.

환경	Default 환경 변수 (원격 저장소 푸시 o)	Secret 환경 변수 (원격 저장소 푸시x)
모든 환경	.env	.env.local
개발 환경(next dev)	.env.development	.env.development.local
배포 환경(next start)	.env.production	.env.production.local
테스트 환경(Jest, Cypress등등)	.env.test	.env.test.local

환경 변수 파일들의 적용 우선순위는 다음과 같이 결정된다.

1. (환경에 따라) .env.development.local, .env.production.local, .env.test.local
2. (테스트 환경이 아닌 경우) .env.local
3. (환경에 따라) .env.development, .env.production, .env.test
4. (모든 환경) .env

 

환경변수 로드

• 서버에서만 사용하는 비밀 값들을 안전하게 보관하기 위해, Next.js는 process.env 값을 전부 빌드 타임에 치환
• 위와 같은 이유로 process.env객체를 일반 JS 객체처럼 다룰 수 없음.
•  const { PUBLISHABLE_KEY } = process.env와 같은 코드는 사용할 수 없고,                  process.env.PUBLISHABLE_KEY의 형식으로 코드를 작성해야 한다.
• cf) .env* 파일 내에서 $VAR 문법을 사용하여 또 다른 환경 변수 참조하기 가능.

//.env
DB_ID = 1238u9138	
DB_NAME = sad

export async function getStaticProps(){
	const db = await myDB.connect({
    	id: process.env.DB_ID,
        name : process.env.DB_NAME,
    })
}

브라우저에 환경 변수 노출하는 법

• NEXT_PUBLIC_XXX 형식으로 지정하면 됨

NEXT_PUBLIC_API_ID = asdasdasd

깃에 커밋하지 않는법

git ignore 파일에 올리고 싶지 않은 파일명 작성해주면 됨

# local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local