[Next.js] 환경변수 undefined

해결방법

.evn.local 파일에 이름을 앞에 NEXT_PUBLIC_을 붙인다

//undefined 발생
SUPABASE_URL = "aaaaaa"
SUPABASE_KEY = "bbbbbbbbbbb"
KAKAOMAP_KEY = "ccccccc"

//해결
NEXT_PUBLIC_SUPABASE_URL = "aaaaaa"
NEXT_PUBLIC_SUPABASE_KEY = "bbbbbbbbbbb"
NEXT_PUBLIC_KAKAOMAP_KEY = "ccccccc"

과정

문제발생 및 해결과정

환경변수 사용을 위해 .evn.local 파일에 아래와 같이 작성했다
(보완을 위해 값은 임의의 값을 넣었다)

SUPABASE_URL = "aaaaaa"
SUPABASE_KEY = "bbbbbbbbbbb"
KAKAOMAP_KEY = "ccccccc"

위의 변수를 컴포넌트에서 사용하기 위해 평소대로 작성했다

const kakaoMapScript = document.createElement("script");
    kakaoMapScript.async = false;
    kakaoMapScript.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAOMAP_KEY}&autoload=false`;
    document.head.appendChild(kakaoMapScript);

그런데 map이 화면에 뜨지 않았다.

1. 값이 잘못되었나?

그래서 ${process.env.KAKAOMAP_KEY} 대신 값인 ccccccc를 넣어 실행했다. 지도가 잘나오는 것이 확인이 되었다.

2. env값이 안 넘어오고 있나?

consol.log("env -->", KAKAOMAP_KEY)
//결과 : undefine

env값이 undefine인 것을 확인한 후 검색하여 NEXT_PUBLIC_을 앞에 작성해줘야 되는것을 알았다.