[Next.js] 환경 변수 사용 방법

환경 변수 사용 방법

들어가며

• Next.js에서 환경 변수(Environment Variable)를 사용하는 방법을 정리해본다.

 

방법

① 환경 변수 파일 설정하기

• Next.js는 .env 파일을 통해 환경 변수를 불러올 수 있다.
• 프로젝트 최상위 경로(/)에 다음과 같은 .env 파일을 생성한다.

 

/.env.local

			
			
			
		
NEXT_PUBLIC_API_URL=https://api.example.com
API_SECRET_KEY=your-secret-key

 

⇒ 다음과 같이 .env뒤에 용도에 따라 다양한 접미어를 붙일 수 있다.

 

환경변수 파일명	설명
.env.local	로컬 개발 환경에서 사용하는 환경 변수 (Git에 추가하지 않는 것이 좋다.)
.env.development	개발 환경에서 사용하는 환경 변수
.env.production	배포 환경에서 사용하는 환경 변수

 

NEXT_PUBLIC_ 접두사가 붙은 변수는 클라이언트와 서버 측 모두에서 사용할 수 있다. 그 외의 변수는 서버 측에서만 사용 가능하다.

 

② 환경 변수 사용하기

• Next.js 프로젝트의 어느 코드에서나 process.env.환경변수명를 통해 환경 변수 값을 가져올 수 있다.

 

서버 사이드(Server-side)에서 사용하기

• API 키와 같은 민감한 정보는 서버(Sever)에서만 접근해야 한다.

 

/pages/api/example.js

			
			
			
		
export default function handler(req, res) {
  const apiKey = process.env.API_SECRET_KEY;
 
  res.status(200).json({ key: apiKey });
}

 

클라이언트 사이드(Client-side)에서 사용하기

• 환경 설정 파일(.env)에서 NEXT_PUBLIC_ 접두사가 있는 변수만 클라이언트에서 사용할 수 있다.

 

/pages/index.js

			
			
			
		
export default function Home() {
  return (
    <div>
      <p>API URL: {process.env.NEXT_PUBLIC_API_URL}</p>
    </div>
  );
}

 

(참고) Git에 민감한 정보가 포함되지 않도록 설정하기

• .env 파일에는 민감한 정보가 포함될 수 있다.
• 따라서 Git에 포함되지 않도록 다음과 같이 .gitignore 파일에 추가해준다.

 

/.gitignore

			
			
			
		
.env*

 

(참고) 알아둘 점

• 다음과 같이 dev 모드로 실행하면, Next.js를 시작할 때 .env 파일에 있는 환경 변수들이 자동으로 불러와진다.

			
			
			
		
$ npm run dev

 

• Next.js에서는 빌드 시점에 환경 변수가 고정되기 때문에, 배포 환경에서 .env 파일을 수정한 경우 애플리케이션을 다시 빌드해야 한다.

			
			
			
		
$ npm run build && npm start

 

참고 사이트

Configuring: Environment Variables | Next.js