Next.js에서 dotenv 사용하기

서버 주소, API key 등과 같은 중요한 정보는 드러내지 않는 것이 가장 중요하다.
그럴 때 사용하는 것이 환경변수 파일(dotenv, .env)이다.

Next.js에서 dotenv를 사용하기 위해서는 dotenv-webpack 라이브러리를 설치하면 된다.

$ npm i dotenv-webpack

이후 next.config.js 파일에서 dotenv를 webpack에 연결해주면 된다.

// next.config.js

const Dotenv = require("dotenv-webpack");

const nextConfig = {
  ...,

  webpack: (config) => {
    config.plugins.push(new Dotenv({ silent: true }));

    return config;
  },
};

module.exports = nextConfig;

이후 .env 파일에 변수를 작성하고 process.env.변수명처럼 같이 불러와서 사용하면 된다.

+) .env에 설정한 변수는 프로젝트를 재실행해야 적용이 된다!