[Next.js] 환경 변수 브라우저에서 사용하기

.env.local 파일에 환경 변수를 저장해놓고 사용하면 변수를 노출시키지 않고 사용할 수 있다.

.env.local

API_KEY="API_KEY" 

?.tsx

const apiKey = process.env.API_KEY

그러나 위와 같이 환경 변수 명을 지정하면 브라우저 상에서 사용할 수 없고, Node.js 환경에서만 사용 가능하다.

브라우저에서 사용하려면 환경 변수 명 앞에 NEXT_PUBLIC_을 붙여야 한다.

.env.local

NEXT_PUBLIC_API_KEY="API_KEY"