[Next.js/Typescript] LOL_Dex: NextJS에서 환경변수 사용하기

구현 목표

환경변수를 설정해서 API key를 사용한다.

 

 

문제점: Next.js 환경변수 설정 오류

Next.js 환경변수를 설정했지만 undefined로 표시되거나 제대로 읽히지 않았다. 클라이언트 측 코드에서 환경변수를 접근하려 할 때 값이 설정되지 않는 문제라도 있는 것일까? 

NextJS에서 환경변수 .env 사용하는 방법

 

 

원인 파악: 환경변수 접두사

클라이언트에서 접근하려면 환경변수 이름에 NEXT_PUBLIC_ 접두사가 꼭 필요하다고 한다. 슬랙 공지를 통해서도, 발제 체크리스트에도 올라와 있던 내용인데 뒤늦게 읽는 바람에 한참 동안 코드를 바라보고만 있어야 했다.

# 클라이언트 및 서버에서 접근 가능
NEXT_PUBLIC_API_KEY=your_public_api_key

# 서버에서만 접근 가능
API_SECRET_KEY=your_api_key

 

• 환경변수 접두사
  클라이언트 측에서 접근하기 위해 환경변수 이름에는 NEXT_PUBLIC_ 접두사가 필요하며, 이것이 없는 환경변수는 서버 사이드에서만 접근 가능하다.
• 환경변수 파일명
  환경변수가 정의된 파일이 올바르지 않은 경우 문제가 생길 수 있다.
• 환경변수 적용 시점
  환경변수를 수정하거나, 추가한 후에는 Next.js 개발 서버를 재시작해주어야 한다.

 

 

수정한 코드

• 올바른 파일에 환경변수 추가
  .env.local 파일에 환경변수를 정의하고, 클라이언트에서 접근하는 경우에 맞게 NEXT_PUBLIC_을 추가한다.

// 클라이언트 측에서 접근하는 경우의 예시
export default function Home() {
  const publicApiKey = process.env.NEXT_PUBLIC_API_KEY;

  return <div>API 키: {publicApiKey}</div>;
}

 

 

요약

• 발생한 문제
  환경변수 접두사를 제대로 사용하지 않아 클라이언트 코드에서 접근 실패
• 해결 방법
  클라이언트 코드에서 접근할 때 NEXT_PUBLIC_을 붙인 변수 사용
• 결과
  이제 환경변수 설정 시 발생하는 문제를 이해하고 해결할 수 있다.