환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이 노출되기 때문에 더 큰 피해를 입게된다.
.env.local 파일이 기본적으로 Next.js 설치시 root 폴더에 깔려져 있으며 환경 변수를 로드를 사용된다. process.env.를 작성하여 환경변수를 불러오면 된다. (기본적으로 대부분의 호스팅 사이트에 env를 따로 지정하는 페이지가 있으므로, 꼭 잊지말고 호스팅 사이트에도 설정하자) .env.local 파일은 기본적으로 .gitignore 파일에 작성되어 있기 때문에 git 저장소에 업로드되지 않는다.
참고: 추후 아래에서 NEXT_PUBLIC을 알아보겠으나, NEXT_PUBLIC 없이 그냥 process.env 쓰게 되면, 클라이언트(브라우저)에서는 실행되지 않는다(undefined). 오직 서버단(getStaticProps, getServerSideProps 등)에서 NEXT_PUBLIC 없이 환경변수를 사용가능하기 때문에 이점 꼭 유의하자.
브라우저(클라이언트)에 환경 변수 노출
기본적으로 환경 변수는 Node.js 환경에서만 사용할 수 있으므로 브라우저에 노출되지 않습니다.
예를 들어 변수를 브라우저에 노출하려면 변수 앞에NEXT_PUBLIC_ 붙여야 합니다:
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
이는process.env.NEXT_PUBLIC_ANALYTICS_ID Node.js 환경에 자동으로 로드되어 코드의 어느 곳에서나 사용할 수 있습니다.
// pages/index.js
import setupAnalyticsService from '../lib/my-analytics-service'
// 'NEXT_PUBLIC_ANALYTICS_ID' can be used here as it's prefixed by 'NEXT_PUBLIC_'.
// It will be transformed at build time to `setupAnalyticsService('abcdefghijk')`.
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)
function HomePage() {
return <h1>Hello World</h1>
}
export default HomePage
다음과 같은 동적 조회는 인라인되지않습니다:
// This will NOT be inlined, because it uses a variable
const varName = 'NEXT_PUBLIC_ANALYTICS_ID'
setupAnalyticsService(process.env[varName])
// This will NOT be inlined, because it uses a variable
const env = process.env
setupAnalyticsService(env.NEXT_PUBLIC_ANALYTICS_ID)
기본 환경 변수
일반적으로 하나의.env.local 파일만 필요합니다.그러나 경우에 따라 development(next dev) 또는production(next start) 환경에 대한 일부 기본값을 추가해야 할 수도 있습니다.
Next.js 기본적으로 .env(모든 환경), .env.development(개발 환경), 그리고 .env.production(개발 환경)를 허용합니다.
.env.local 항상 설정된 기본값으로 설정되어 다른 환경을 덮어쓰기 합니다(최우선).
참고 : .env,.env.development 및.env.production 파일은 기본값을 정의하므로 저장소(repository)에 포함되어 있어야 합니다. env*.local 파일은 반드시 .gitignore에 추가되어 있어야 하며, 비밀을 저장할 수 있는 곳입니다