Next.js에서 환경 변수 사용하기

Next.js에는 환경 변수에 대한 지원이 내장되어 있어 dotenv 같은 모듈을 설치하지 않아도 된다.

process.env로 .env.local 파일에 접근할 수 있다.

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

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

기본적으로 .env.local의 값은 Node.js 환경에서만 사용할 수 있다.

즉, 브라우저에 노출되지 않는다.

브라우저에 변수를 노출하려면 변수에 NEXT_PUBLIC_ 접두사를 붙여야 한다.

이렇게 하면 Node.js 환경에 자동으로 로드되어 코드의 어디에서나 사용할 수 있다.

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

// 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_
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID);

function HomePage() {
  return <h1>Hello World</h1>;
}

export default HomePage;

나같은 경우 오픈 api의 key 값을 환경변수에 저장했다가 api 호출 시 꺼내쓰는 경우 NEXT_PUBLIC_ 접두사를 붙이지 않으면 key 값이 undefined로 나와서 해당 접두사를 붙였다.

Environment Variables