Next.js에서 환경변수 .env를 클라이언트 사이드에서도 사용하려면..?

🐕 환경변수를 사용해야하는 이유

API key 노출되면 다른 사람에게 한무 즐기기를 당할 수도 있습니다.

굉장히 불쾌하고 API의 플랜에 따라서는 통장잔고가 남아나지 않을 수도 있겠죠..?

따라서 github에 API Key를 고대로 올려버리면 안됩니다. 잘 숨겨줘야 하는데 주로 환경변수를 많이 이용합니다.

 

물론 이러한 용도로만 사용되는 것은 아니고 개발, 테스트, 실제 서비스 등 여러 환경에서

애플리케이션을 배포하게 되기 때문에 각 환경에 따라서 다르게 설정해야하는 항목들을 환경변수로 관리합니다.

---

👻환경 변수를 등록하는 방법

root 디렉토리에 .env 혹은 .env.local 파일을 생성해줍니다.

이 안에는 키밸류 쌍의 형태로 값을 저장해줄 수 있습니다.

루트디렉토리에 생성한 .env.local 파일

NEXT_PUBLIC_IP_API_KEY = 대충 api 키
ID_API_KEY = 대충 api 키

여기서 ID_API_KEY는 다른 파일 내부에서

process.env.ID_API_KEY 의 형태로 접근할 수 있습니다.

NEXT_PUBLIC_IP_API_KEY역시도

process.env.NEXT_PUBLIC_IP_API_KEY로 접근할 수 있습니다.

 

그런데 문제는 NEXT는 서버컴포넌트와 클라이언트컴포넌트 두가지 종류의 컴포넌트가 있다는 것입니다.

따라서 그냥 설정해준 API_KEY의 경우에는 클라이언트사이드에서는 접근할 수 없습니다.

왜냐하면 우리가 등록해준 환경변수는 Node.js의 환경을 말하는 것이기 때문입니다.

 

따라서 클라이언트 컴포넌트(리액트 컴포넌트)에서 환경변수에 접근해야하는 경우

NEXT_PUBLIC이라는 접두사를 사용하는 것을 통해 클라이언트 컴포넌트에서 환경변수에

접근하는 것을 허용해주는 것입니다. 하나의 약속이라고 생각할 수 있겠네요!

---

🥶 env 파일을 수정했을 때는

개발서버를 다시 시작해주어야 환경변수가 적용된 환경으로 서버가 시작됩니다.

vercel, netlify 등에 배포하는 경우에는 앱 설정 대시보드에서 환경변수를 입력해줄 수 있습니다.

env 파일 작성했으니 되겠지하면 안됨니다... 당연함 env 파일을 깃허브에 안올림

---

🐶레퍼런스

https://cpro95.tistory.com/464

---

이해했다고 생각할 때가 가장 무서울 때다.