[Next.js] - NEXT JS environment variables

Node + Next JS 환경변수 종류

buildtime env

• 빌드 시점에 선언되며 빌드 이후에 환경변수 업데이트 불가
• 환경변수 엽데이트 시 새로 빌드 필수

runtime env

• 빌드 이후 런타임에 환경변수 선언
• 새로운 빌드 없이 앱 종료 후 새로 시작시 환경변수 업데이트 적용
• ✅ 프로젝트 리빌드 없이 환경변수 설정에 따른 데이터 처리
• ✅ 하나의 빌드 환경으로 다양한 서비스 설정 제공 가능

	선언 시점	접근성: CSR	접근성: SSR	접근성: Node.js
.env	buildtime / runtime		✅		process.env cannot be destructured or accessed with dynamic properties
prefix: NEXT_PUBLIC inside .env	buildtime	✅	✅		process.env cannot be destructured or accessed with dynamic properties
next.config.js 내부 env 설정	buildtime	✅	✅		process.env cannot be destructured or accessed with dynamic properties
publicRuntimeConfig	runtime	✅	✅		SSR 페이지에서만 사용 가능
serverRuntimeConfig	runtime		✅
process.env	runtime			✅

Next JS : buildtime env 설정

• next.config.js 에서 설정을 해주거나 .env 파일 안에서 NEXT_PUBLIC_[ENV] prefix 로 환경변수 선언

method 1: next.config.js :

module.export = {
	env: {
		MY_ENV: proces.env.MY_ENV
	}
}

method 1: next.config.js :

NEXT_PUBLIC_MY_ENV:myEnvValue

Next JS : runtime env 설정

method 1: publicRuntimeConfig

• ✅ 클라이언트 코드 서버사이트 코드에서만 접근 가능

module.export = {
	publicRuntimeConfig: {
		MY_ENV: proces.env.MY_ENV
	}
}

method 1: serverRuntimeConfig

• ✅ 서버사이드 코드에드만 접근 가능

module.export = {
	serverRuntimeConfig: {
		MY_ENV: proces.env.MY_ENV
	}
}

How to use: runtime env in NextJs

import getConfig from 'next/config'

const { publicRuntimeConfig,  serverRuntimeConfig} = getConfig()


const publicRuntimeEnv = publicRuntimeConfig.MY_ENV
const serverRuntimeEnv = serverRuntimeConfig.MY_ENV

참조문서 - saltyCraneBlog