[Next.js] 다시는 까먹지 말자...env

Next.js로 토이 프로젝트를 진행하다가 마주한 문제다.

client side에서 환경 변수를 불러올일이 있어서 process.env.${환경변수명}으로 호출했는데

undefined가 반환되는게 아닌가..

분명 예전에도 이랬던 경험이 있었는데 하면서 공식문서를 뒤져보니 바로 답이 나왔다.

일단 환경 변수 파일의 종류를 살펴보고 client side에서 호출하는 방법에 대한 내용을 적어보겠다.

환경 변수 파일 종류

1. .env: 모든 환경에서 사용
2. .env.local: 모든 환경에서 사용되지만 Git에 무시됨. 로컬 개발환경에서 사용되는 비밀 값들을 저장하는데 적합
3. .env.development: 개발 환경(next dev)에서만 사용. API URL을 dev-api로 지정
4. .env.production: 프로덕션 환경(next start)에서만 사용. API URL을 운영 api로 지정.
5. .env.test: 테스트 환경에서 사용

환경 변수 파일은 반드시 루트 디렉토리에 위치해야 한다.

서버 사이드에서의 환경 변수 사용

서버 사이드에서는 process.env를 통해 모든 환경 변수에 접근할 수 있다.

// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {
  name: string
}

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  res.status(200).json({ name: process.env.API_URL })
}

클라이언트 사이드에서의 환경 변수 사용

클라이언트 사이드에서 환경 변수를 사용하려면 변수명 앞에 NEXT_PUBLIC_을 붙여야 한다.

// pages/index.tsx
import { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <div>
      <h1>클라이언트 사이드 환경 변수</h1>
      <p>{process.env.NEXT_PUBLIC_API_URL}</p>
    </div>
  )
}

export default Home

환경 변수 타입 지정(Typescript)

// env.d.ts
declare namespace NodeJS {
  interface ProcessEnv {
    NEXT_PUBLIC_API_URL: string;
    DATABASE_URL: string;
    API_KEY: string;
  }
}

다시는 까먹지 말자!