env

Next.js 9.4 출시 이후로 환경 변수 추가에 대해 더 직관적이고 편리한 경험을 제공하고 있습니다. 한 번 시도해보세요!

알아두면 좋은 정보: 이 방식으로 지정된 환경 변수는 항상 JavaScript 번들에 포함되며, 환경 변수 이름 앞에 NEXT_PUBLIC_을 접두사로 추가하는 것은 환경 또는 .env 파일을 통해 지정할 때만 효과가 있습니다.

JavaScript 번들에 환경 변수를 추가하려면 next.config.js 파일을 열고 env 설정을 추가하세요:

next.config.js

module.exports = {
  env: {
    customKey: 'my-value',
  },
}

이제 코드에서 process.env.customKey에 접근할 수 있습니다. 예를 들어:

function Page() {
  return <h1>The value of customKey is: {process.env.customKey}</h1>
}
 
export default Page

Next.js는 빌드 시 process.env.customKey를 'my-value'로 대체합니다. webpack의 DefinePlugin (opens in a new tab)의 특성상 process.env 변수를 구조 분해 할당하려고 하면 작동하지 않습니다.

예를 들어, 다음 코드 라인은:

return <h1>The value of customKey is: {process.env.customKey}</h1>

다음과 같이 변환됩니다:

return <h1>The value of customKey is: {'my-value'}</h1>

distDir eslint