Next.js 기본 사용법(9) - 환경변수

이번 포스트에서는 환경변수에 대해 알아본다.

 

기본적으로 .env.local 파일을 통해 환경 변수를 설정할 수 있다.

그 안에서, 서버와 브라우저에서의 사용법에 차이가 있다.

 

서버

// .env.local

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

사용할 때, process.env 를 통해 사용한다.

// 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.js의 브라우저에서는 '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

 

---

 

다음 포스트에서는 Next-redux-wrapper 에 대해 알아본다.