[Next.js] .env (dotenv-webpack)

npm i dotenv-webpack
// or
yarn add dotenv-webpack

next.js에서 지원하는 환경변수를 사용하기 위해서 .env.development 파일을 만들어서 위와 같이 작성했다.

name=DEVELOPMENT
NEXT_PUBLIC_API_URL=http://localhost:3001

근데, 이 변수를 컴포넌트에서 사용하고자 했을 때 undefined가 표시된다.

const todos: NextPage = () => {
	const API_URL = process.env.NEXT_PUBLIC_API_URL
    console.log(API_URL) // undefined
}

브라우저에서 .env파일을 통해 환경변수를 사용할 때는 process.env.NEXT_PUBLIC_변수명으로 이름을 지어야 한다. Node.js 환경에서는 process.env.변수명 으로 변수 이름을 정한다.

해결 방법

next.config.js의 내용을 수정해야 한다. 아래 내용을 추가 후 서버 off 후에 다시 on하면 정상적으로 환경변수를 사용할 수 있다.

module.exports = {
  reactStrictMode: true,
  // webpack 내용 추가
  webpack: (config) => {
    config.plugins.push(new dotenv({ silent: true }));

    return config;
  },
  // env 내용 추가
  env: {
    BASE_URL: process.env.BASE_URL,
  },
};