Next js 환경변수

NEXT JS Environment Variables를 번역했습니다.
Next.js 버전 9.4 이상용입니다. 이전 버전의 Next.js를 사용하는 경우 next.config.js에서 환경 변수를 업그레이드하거나 참조하세요. (github.com/vercel/next.js/tree/canary/examples/environment-variables)

Exposing Environment Variables to the Browser

기본적으로. env.local을 통해로드 된 모든 환경 변수는 Node.js에서만 사용할 수 있는데,

브라우저에 변수를 사용하려면 변수 앞에 NEXT_PUBLIC_을 붙여야합니다.

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

process.env.NEXT_PUBLIC_ANALYTICS_ID가 Node.js 환경에 자동으로 로드되어 코드의 어느 곳에서나 사용할 수 있습니다.

값은 NEXT_PUBLIC_ 접두사로 인해 브라우저로 전송되는 JavaScript에 들어갑니다.

Default Environment Variables

일반적으로. env.local 파일은 하나만 필요하지만,

개발 환경이나 프로덕션 환경에 대한 일부 기본값을 추가할 수 있습니다.

Next.js를 사용하면 다음과 같은 기본값을 설정할 수 있습니다.

• .env (모든 환경)
• .env.development (development 환경)
• .env.production (production 환경).

env, .env.development 및 .env.production 파일은 기본값을 정의할 때 repository에 포함되어야 합니다.

.env.local

.env.local은 항상 설정된 기본값을 재정의합니다.

Loading Environment Variables

Next.js는 .env.local에서 process.env로 환경 변수를 로드하기 위한 기본 제공 지원이 있습니다.

예) '.env.local':

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

process.env.(변수명)가 Node.js 환경에 자동으로 로드되어 data fetching methods 및 API routes에서 사용할 수 있습니다.

예를 들어, 'getStaticProps'를 사용할 때,

// pages/index.js
export async function getStaticProps() {
  const db = await myDB.connect({
    host: process.env.DB_HOST,
    username: process.env.DB_USER,
    password: process.env.DB_PASS,
  })
  // ...
}

* 주의process.env는 표준 자바 스크립트 객체가 아니므로 객체 구조 해제를 사용할 수 없습니다.

// 잘못된 예시
const { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env

example) github.com/vercel/next.js/tree/canary/examples/environment-variables 참고

폴더 구조

.env

ENV_VARIABLE="server_only_variable"
NEXT_PUBLIC_ENV_VARIABLE="public_variable"

.env.development

DEVELOPMENT_ENV_VARIABLE="server_only_development_variable"
NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE="public_development_variable"

.env.production

PRODUCTION_ENV_VARIABLE="server_only_production_variable"
NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE="public_production_variable"

.env.local.example

ENV_LOCAL_VARIABLE="server_only_variable_from_env_local"
NEXT_PUBLIC_ENV_LOCAL_VARIABLE="public_variable_from_env_local"

.env는 development와 production환경 두 가지 공통된 사항을 적용하고 싶을 때 사용

.env.development와 .env.production는 development와 production환경 각각 따로 사용하고 싶을때 사용

 

(1) broswer에서 사용하는 방법

const IndexPage = () => (
  <div>
    <div>
      <h1>Environment Variables with Next.js</h1>
      <p>
        {process.env.NEXT_PUBLIC_ENV_VARIABLE}
        with Next.js.
      </p>
    </div>
  </div>
)

(2) Node.js 에서 사용하는 방법

// only run in Node.js. Check the terminal to see the environment variables
// Using the variables below in the browser will return `undefined`. Next.js doesn't
// expose environment variables unless they start with `NEXT_PUBLIC_`

export async function getStaticProps() {
  console.log('[Node.js only] ENV_VARIABLE:', process.env.ENV_VARIABLE)
  console.log(
    '[Node.js only] ENV_LOCAL_VARIABLE:',
    process.env.ENV_LOCAL_VARIABLE
  )

  return { props: {} }
}

getStaticProps` 및`getStaticPaths` 및`getServerSideProps`와 같은 유사한 Next.js 메서드인데,

 

Node.js에서만 실행됩니다. 환경 변수를 보려면 터미널을 확인하십시오.

브라우저에서 위 변수를 사용하면 'undefined'가 반환됩니다.

`NEXT_PUBLIC_`로 시작하지 않는 한 환경 변수를 노출합니다.

 

Next.js 실행 포트 변경 방법

package.json

{
  "name": "cna-demo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 1234",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  }
}

yarn dev시 포트가 1234로 적용되어 develope 환경에서 작업할 수 있다.

 

 

출처: nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser