NextJS에서 환경 변수(.env)를 사용하는 방법은 무엇입니까?

소개

프로젝트를 개발할 때 애플리케이션에서 다양한 종속성을 사용합니다. 많은 도구는 인증된 사용자에 대한 API의 경우 토큰/API 키를 사용하여 엔드포인트 액세스 권한을 부여합니다. 이러한 API 키는 가치가 있으며 인터넷에서 다른 사람과 공유할 수 없습니다.

프로젝트를 배포하는 동안 환경 변수를 사용하여 키를 숨깁니다. 키는 서버에 저장되며 클라이언트에서 사용할 수 없습니다.

오늘은 NextJS 어플리케이션에서 환경변수를 사용하는 방법에 대해 알아보겠습니다. 당신이 사랑한다면 dotenv 우리는 그것을 구현합니다.

시작하겠습니다.

next.config.js 사용

NextJS는 애플리케이션에서 환경 변수를 사용하는 기능을 제공합니다. 루트 폴더의 .env.local 파일에서 변수를 정의해야 합니다.
.env.local 파일을 만들어 모든 환경 변수를 선언합니다.

.env.local

API_KEY = "<Your API KEY>"

.env.local에 정의된 변수를 이제 서버 측에서 사용할 수 있습니다. 프런트엔드에서 API_KEY를 console.log하면 개발 도구의 콘솔에 undefined가 표시됩니다.

index.js

console.log(process.env.API_KEY)

프런트엔드에서 사용할 수 있는 환경 변수를 얻으려면 next.config.js 파일을 구성해야 합니다.

.next.config.js

const nextConfig = {
  env:{
    API_KEY: process.env.API_KEY
  }
}

이제 API_KEY는 프런트엔드에서 사용할 수 있으며 console.log에 있으면 값을 얻을 수 있습니다.

Note: Restart the server to see the changes

'NEXT_PUBLIC_' 사용

nextJS의 최신 버전에는 next.config.js를 구성하지 않고 프런트엔드에 환경 변수를 사용할 수 있는 기능이 있습니다. .env.local의 변수 앞에 NEXT_PUBLIC_를 붙여야 합니다.

.env.local

NEXT_PUBLIC_PASSWORD = "<Your Password>"

이렇게 하면 이름이 NEXT_PUBLIC_PASSWORD 인 프런트엔드에 변수가 로드됩니다. process.env.NEXT_PUBLIC_PASSWORD를 통해 값에 액세스할 수 있습니다.

index.js

console.log(process.env.NEXT_PUBLIC_PASSWORD)

'dotenv' 라이브러리 사용

dotenv 라이브러리를 사용하여 환경 변수를 로드하면 NextJS에서 쉽게 통합할 수 있습니다.

프로세스는 next.config.js 구성과 유사한 패턴을 따릅니다. 라이브러리를 설치하고 루트 디렉터리에 .env 파일을 만듭니다. 평소처럼 값으로 변수를 초기화합니다.

.env

API_KEY = "<Your API KEY>"

이제 next.config.js를 구성해야 합니다. 먼저 dotenv 라이브러리를 가져와야 합니다.

.next.config.js

require("dotenv").config

이제 변수를 파일에 추가하여 프런트엔드에 변수를 로드해야 합니다.

.next.config.js

const nextConfig = {
  env:{
    API_KEY: process.env.API_KEY
  }
}

이제 프런트엔드에 환경 변수가 있습니다.

결론

위에서 언급한 방법을 사용하여 환경 변수를 로드할 수 있습니다. NEXT_PUBLIC_를 구성할 필요가 없으므로 next.config.js를 사용하여 변수를 로드하는 것을 선호합니다.

이 기사가 NextJS의 환경 변수를 이해하는 데 도움이 되었기를 바랍니다. 기사를 읽어 주셔서 감사합니다.