NextJS에서 환경 변수(.env) 설정

내 환경 변수가 작동하지 않습니다 😱😱😱
이 상황에서 .env 파일을 사용하여 NextJS 앱에서 개발하는 동안 API URL 또는 비밀 키를 숨기고 싶을 수 있습니다. 올바르게 설정하는 방법을 살펴보겠습니다.

Next.js에서 환경 변수를 어떻게 사용합니까?

단순한! Next.js 애플리케이션의 루트에서 .env 파일을 생성합니다. 이 파일 내에서 다음과 같이 필요한 모든 환경 변수를 선언합니다.

STRIPE_KEY = "*************"
API_KEY = "<Your API KEY>"

그런 다음 코드에서 이러한 변수를 참조할 수 있습니다.

next.config.js 사용

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

API_KEY = "<Your API KEY>"

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

console.log(process.env.API_KEY)

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

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

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

‼️참고: 변경 사항을 보려면 서버를 다시 시작하세요.

'NEXT_PUBLIC_' 사용

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

NEXT_PUBLIC_JWT_SECRET = "<Your secret>"

NEXT_PUBLIC_JWT_SECRET라는 이름으로 프런트엔드에 변수를 로드합니다. process.env.NEXT_PUBLIC_JWT_SECRET을 통해 값에 액세스할 수 있습니다.

console.log(process.env.NEXT_PUBLIC_JWT_SECRET)

dotenv' 라이브러리 사용

dotenv 라이브러리를 사용하여 환경 변수를 로드하면 NextJS에서 쉽게 통합할 수 있습니다.
프로세스는 next.config.js를 구성하는 것과 유사한 패턴을 따릅니다. 라이브러리를 설치하고 루트 디렉터리에 .env 파일을 만듭니다. 평소처럼 값으로 변수를 초기화합니다.

API_KEY = "<Your API KEY>"

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

require("dotenv").config

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

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

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

결론

위에서 언급한 방법을 사용하여 환경 변수를 로드할 수 있습니다. 기사를 읽어 주셔서 감사합니다.