petDairy_.env 파일 문제

[.env]

# 카카오톡
KAKAO_CLIENT_ID=**
KAKAO_CALLBACK_URL=**

 

[social.tsx]

const KAKAO_CLIENT_ID = process.env.KAKAO_REST_API_KEY;
const KAKAO_CALLBACK_URL = process.env.KAKAO_CALLBACK_URL;

const kakaolink = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_CALLBACK_URL}&response_type=code`;

 

클라이언트 컴포에서 환경변수를 호출했지만 브라우저 콘솔에는 undefined가 출력이 됐다.

왜 이런 문제가 생긴걸까?

변수 이름 오류?

해결방법 1) env 변수 앞에 NEXT_PUBLIC_을 넣으면 된다. 

# 카카오톡
NEXT_PUBLIC_KAKAO_CLIENT_ID=**
NEXT_PUBLIC_KAKAO_CALLBACK_URL=**

 

공식문서 왈

.env.local 파일을 사용하고 접두사로 NEXT_PUBLIC_을 사용한다.

 

하지만 .env를 사용해도 잘만 됐는데 왜 local을 붙여야하는지 의문이 들었다.

 

.env 파일을 사용할 수 있지만, 각 파일에는 특정 우선순위가 부여됩니다. 

Next.js에서는 .env.local이 가장 높은 우선순위를 가지므로, 

이 파일에 저장된 환경 변수는 다른 .env 파일에 저장된 변수보다 우선하여 사용됩니다.

이러한 환경 변수의 우선순위를 사용함으로써, 

다양한 환경에서 애플리케이션을 실행할 때 각각의 환경에 맞는 설정을 관리할 수 있습니다. 

예를 들어, 로컬 개발 환경에서는 .env.local 파일에 개발용 환경 변수를 저장하고,

 프로덕션 환경에서는 .env.production 파일에 프로덕션용 환경 변수를 저장할 수 있습니다.