Next.js | 기본기능 | 환경 변수

예시

https://github.com/vercel/next.js/tree/canary/examples/environment-variables

GitHub - vercel/next.js: The React Framework

 

우리는 기본적으로 .env.local 파일을 생성해서 환경 변수를 설정할 수 있다.

 

.env.local

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

 

선언한 환경 변수들을 서버사이드 측에서 다음과같이 쓸 수 있다.

// 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,
  })
  // ...
}

 

 

Next 브라우저에서의 환경 변수

Next 브라우저에서는 'NEXT_PUBLIC_' 접두사를 붙여야한다. 예를들어

 

.env.local

NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk

 

 

이렇게 선언한 환경 변수를 브라우저에서 다음과 같이 쓸 수 있다.

 

// pages/index.js
import setupAnalyticsService from '../lib/my-analytics-service'

// NEXT_PUBLIC_ANALYTICS_ID can be used here as it's prefixed by NEXT_PUBLIC_
setupAnalyticsService(process.env.NEXT_PUBLIC_ANALYTICS_ID)

function HomePage() {
  return <h1>Hello World</h1>
}

export default HomePage