본문 바로가기

React

Next.js 프로젝트에서 .env 변수 사용하기

dotenv-webpack라이브러리를 설치한다.

npm install dotenv-webpack

 

다음은 next.config.js파일에서 Dotenv 플러그인을 webpack과 연결 시켜준다.

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

module.exports = {
  webpack: (config) => {
    // 기존의 웹팩 플러그인에 새로운 Dotenv플러그인을 연결시켜준다.
    // silent는 옵션은 .env파일을 찾지 못했을 때 에러를 일으키지 않도록 설정해주는 옵션이다.
    config.plugins.push(new Dotenv({ silent: true }));

    return config;
  }
};

 

이렇게 하고나면 process.env.변수명으로 .env파일에 설정한 변수를 사용할 수 있다.