여느 프로그래밍언어와 마찬가지로 NextJS에도 환경변수 설정 기능이 있습니다.
한번 알아봅쉬다..!!
.env.local
- 기본 값을 정의합니다.
- 여기에 정의된 값들은
process.env로 호출 가능합니다.
// example
// .env.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword
// pages/index.js
export async function getStaticProps() {
const db = await myDB.connect({
host: process.env.DB_HOST,
username: process.env.DB_USER,
password: process.env.DB_PASS,
})
// ...
}
환경 변수의 재사용
- 환경변수 내용을 환경변수 파일 내부에서 재 사용하기위해서는
$을 붙여서 재사용이 가능합니다.
// example
# .env
A=abc
# becomes "preabc"
WRONG=pre$A
브라우저에 환경변수 노출하기
- Nextjs는 브라우저에도 환경변수를 노출 할 수는 있는데, 그러고 싶은 경우 반드시
NEXT_PUBLIC_라는 prefix를 변수에 사용해야합니다.
// .env
NEXT_PUBLIC_ID=abc
// index.js
function HomePage() {
return <h1>{process.env.NEXT_PUBLIC_ID}</h1>
}
개발환경에 따른 설정
- 기본적으로
.env.local은 최상위 설정파일로 개발환경/배포환경 모두에 환경변수들이 반영된다. - 개발환경의 경우
.env.development.local로, 배포환경의 경우.env.production.local로 설정한다. - test 환경도 마찬가지로 반영된다.
NODE_ENV=production
.env.production.local
.env.local
.env.production
.env
NODE_ENV=development
.env.development.local
.env.local
.env.development
.env
NODE_ENV=test
.env.test.local
.env.test
.env