[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