[Next] Next내에서 .env 파일의 환경변수들이 안 읽히는 문제 해결

.env 파일에 환경 변수를 작성하고

import dotenv from "dotenv";
dotenv.config();

도 해줬는데

const API_BASE_URL = process.env.API_BASE_URL;

이렇게 선언한 API_BASE_URL이 자꾸 undefined로 출력이 되는 거다.

 

그래서 찾아봤더니 next.config.js 파일에서 뭔가 설정을 해줘야하는 거였다.

그래서 next.config.js 파일을 이렇게 해줬다.

/** @type {import('next').NextConfig} */
const nextConfig = {
... 앞의 설정들
  env: {
    API_BASE_URL: process.env.API_BASE_URL,
  },
... 뒤의 설정들
};

module.exports = nextConfig;

이랬더니 API_BASE_URL 변수를 쓸 수 있게 됐다.

 

next.config.js 파일에 env 설정을 추가한 후에는 Next.js 앱 내에서 process.env.API_BASE_URL을 사용하여 환경 변수에 접근할 수 있습니다. 이렇게 설정하면, 서버와 클라이언트 모두에서 해당 환경 변수를 사용할 수 있게 됩니다.

환경 변수를 추가하거나 변경한 후에는 Next.js 서버를 재시작해야 적용됩니다. 이후에는 앱의 어느 부분에서든 process.env.API_BASE_URL을 사용하여 환경 변수 값을 읽을 수 있습니다.

 

Thx GPT ㅎㅎ