카카오맵 api를 가져와서 작업하는데 자꾸 콘솔창에 새빨간 오류가 뜨길래 봤더니
appKey가 undefined...? 이게 뭐죠?
서버에는 Key값이 잘 있는데 클라이언트에는 Key값이 전해지지 않고 있었다...
.env 파일을 확인했더니 너무 잘 있는데 왜 안 되지? 싶었다
그런데...
찾아보니 Next.js로 작업 중인 프로젝트인데 React프로젝트 에서 작업하던 버릇대로 REACT_APP으로 불러오고 있던 것이다...
앞에 REACT_APP을 붙이는 건 React 프로젝트 중 create-react-app으로 시작했을 경우에만 사용한다고 한다.
원인을 알았으니 이제 해결해 보자..
.env 작성하기
Next.js에서는 NEXT_PUBLIC을 앞에 붙여주면 된다.
NEXT_PUBLIC_API_KEY = 키번호API Key 불러오기
불러오는 건 React 프로젝트와 동일하다.
process.env를 붙이면 된다.
const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
이제 클라이언트에서도 오류 없이 잘 뜬다!
다만 이렇게 되면 API Key가 다른 사람들에게도 보이게 되므로 Next.js의 redirect와 rewrite를 사용하는 것이 좋다는데 그 방법은 다음에 알아보겠다... ^^ 😂
