open API를 사용하여 토이 프로젝트를 진행하던 도중 API_KEY를 사용하여 API를 호출하는데 자꾸 API_KEY가 undefinde로 인식을 하지 못하는 현상이 발생하게 되었다.

발생

쿼리스트링으로 서버와 닉네임을 넘겨서 그에 따른 결과 값을 받는다.

API키는 env파일에 저장하여 API키를 저장하는데
자꾸 API-KEY가 undefinde로 env파일을 인식을 못하는 상황이 발생하였다..

발생원인

원래 React에서는 env파일을 사용할 때
이런식으로 REACT_APP을 붙여서 사용해야한다.

하지만 NEXTJS에서는 REACT_APP을 붙이면 서버사이드렌더링에서는 사용이 가능 하지만, 클라이언트사이드렌더링에서는 사용이 불가하다는 공식문서를 찾게 되었다.

해결

NEXTJS에서는 서버사이드렌더링과 클라이언트사이드렌더링에서 모두 사용할 수 있도록 NEXT_PUBLIC을 붙여서 사용하라고 나와 있었다.
이런식으로 사용하면 서버사이드와 클라이언트 사이드에서 모두 사용할 수 있다!

api키가 정상적으로 들어오는 것을 볼 수 있다.