Next.js에서 환경변수 설정하기

보안을 위해 API KEY를 가져올때는 .env파일을 생성해서 가져온다.
근데 이번에 Next.js 공부를 처음하면서 환경 변수명을 REACT_ ~ 이런식으로 지정해줬더니 값을 가져오지 못하는 오류가 났다. 이를 통해 찾아 본 결과 Next.js에서는 NEXT_PUBLIC 키워드를 사용해야 된다는 것을 알게 되었다. 
그러면 Next.js에서 환경 변수 설정에 대해서 알아보자!

---

1. env 파일 생성하기

env파일은 프로젝트, 루트 디렉토리에 생성해야 된다.
 

2. 환경 변수 설정하기

NEXT_PUBLIC_API_KEY= 여기에 API KEY 작성하기

• Next.js는 서버와 브라우저 모두에서 환경 변수를 사용하려면 환경 변수명 앞에 NEXT_PUBLIC_ 을 붙여줘야 된다.
  • 즉, 클라이언트 측에서 접근 가능한 API URL을 NEXT_PUBLIC_API_KEY라는 이름으로 지정한다.

3. 환경 변수 사용하기

• Next.js에서 환경 변수를 사용하려면 process.env 객체를 통해 접근할 수 있다.

// fetch 함수
async function getMovies() {
  // 환경 변수에서 API URL을 가져옴.
  const response = await fetch(process.env.NEXT_PUBLIC_MOVIE_API_KEY);
  const json = await response.json();
  return json;
}

export default async function HomePage() {
  const movies = await getMovies(); // 영화 데이터를 가져옴.
  return (
    <div>
      {JSON.stringify(movies)} {/* 영화 데이터를 출력 */}
    </div>
  );
}

 
.env파일에서 설정한 NEXT_PUBLIC_MOVIE_API_KEY를 가져와 process.env 객체를 사용하여 가져오면 된다!
 
이번 시간을 통해서 next.js에서 환경 변수를 사용하려면 앞에 NEXT_PUBLIC을 붙여야 된다는 것을 알게됐다. 나중에 next.js를 통해 프로젝트를 진행할 때 이러한 점은 유의해서 사용해야겠다~

https://github.com/juyeon-Bae  nextjs study code