서버 주소, 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
에 설정한 변수는 프로젝트를 재실행해야 적용이 된다!