Nexet.js Environment Variables

Next.js 에서는 기본적으로 Environment Variables(환경변수)에 대해서 기본적으로 지원하고 있어서, 별도의 라이브러리 설치나 설정 없이 사용 가능하다.

• .env.local을 사용하여 환경 변수 불러옴
• NEXT_PUBLIC 접두사 사용하여 환경 변수를 브라우저에 노출 

* 환경변수(Environment Variables)란 무엇이고, 사용하는 이유?

환경 변수는 .env라는 파일을 만들어 애플리케이션이 실행될 때 특정 값(서버 URL이나 다른 도구들의 ID 값 등)을 넘길 수 있는 변수를 의미한다. 사용하는 가장 큰 이유는 보안상의 문제이다. 왜냐하면 코드에서 어떠한 특정 값이 노출이 되면 해커들한테 코드가 해킹되었을 때, 덩달아 환경변수로 설정하지 않은 서버 URL이나 특정 값들이 같이 노출되기 때문에 더 큰 피해를 입게된다. 

환경변수

 

예시 소스

• Environment Variables

GitHub - vercel/next.js: The React Framework

 

환경 변수 로드

.env.local 파일이 기본적으로 Next.js 설치시 root 폴더에 깔려져 있으며 환경 변수를 로드를 사용된다.  process.env.를 작성하여 환경변수를 불러오면 된다. (기본적으로 대부분의 호스팅 사이트에 env를 따로 지정하는 페이지가 있으므로, 꼭 잊지말고 호스팅 사이트에도 설정하자) .env.local 파일은 기본적으로 .gitignore 파일에 작성되어 있기 때문에 git 저장소에 업로드되지 않는다.

.env.local
DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

이렇게 하면 Node.js 환경에 자동으로 로드되어 process.env.DB_HOST, process.env.DB_USER, process.env.DB_PASS 변수를 데이터 Next.js 데이터 가져오기 및 API routes 에서 사용할 수 있습니다 .

예를 들어 getStaticProps와 함께 사용하는 방법은 다음을 사용합니다 

// 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,
  })
  // ...
}

참고 : 추후 아래에서 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에 추가되어 있어야 하며, 비밀을 저장할 수 있는 곳입니다

 

Vercel에서의 환경 변수

Next.js 애플리케이션을 Vercel 에 배포할 때 프로젝트 설정에서 환경 변수를 구성할 수 있습니다. 모든 유형의 환경 변수를 여기에서 구성해야 합니다. 개발에 사용되는 환경 변수도 나중에 로컬 장치에 다운로드 할 수 있습니다. 개발 환경 변수를 구성한 경우 .env.local다음 명령을 사용하여 로컬 컴퓨터에서 사용하기 위해 해당 변수를 가져올 수 있습니다 .

vercel env pull .env.local

 

환경 변수 로드 순서

 

환경 변수는 다음 위치에서 순서대로 조회되며 변수가 발견되면 중지됩니다.

1. process.env
2. .env.$(NODE_ENV).local
3. .env.local( NODE_ENV이 때 선택되지 않습니다 test.)
4. .env.$(NODE_ENV)
5. .env

예를 들어, NODE_ENV가 development(개발) 모드이고, .env.development.local 와 .env를 정의하였다면, .env.development.local  사용될 것입니다.

 

 

Next.js 공식 홈페이지

https://nextjs.org/docs/basic-features/environment-variables#default-environment-variables

Basic Features: Environment Variables | Next.js