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,
},
};
'Front-End' 카테고리의 다른 글
[React-Native] React-native 설치하기 (0) | 2022.02.28 |
---|---|
[React Query] React Query와 상태관리 (0) | 2022.02.23 |
[Recoil] Next.js에서 Recoil 에러처리 (0) | 2022.02.09 |
[Test] 테스트에 대한 이해 (0) | 2022.02.06 |
[MSW] Mocking 이란? (0) | 2022.01.29 |