NextJS - DotENV 제거

나는 항상 .env 파일을 싫어했습니다. 거의 매번 내 앱 디렉토리의 최상위 레벨에 배치해야 했습니다. 어느 시점에서 나는 npmconfig 패키지를 사용하기 시작했습니다. 이는 애플리케이션에 일관된 구성 인터페이스를 제공하며 이를 NextJS 환경에 구현하는 강력한 방법이 있습니다. 텍스트보다 코드를 선호하는 사용자는 완성본implementation을 자유롭게 확인하십시오.

구현

참고로 우리는 NextJS Typescript zero configuration 설정을 사용합니다.

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

먼저 필요한 npm 패키지를 설치해야 합니다.

npm install config @types/config

이제 구성 디렉토리와 구성 파일을 만듭니다. default.yaml은 나중에 유형 템플릿으로 사용됩니다.

config
- default.yaml
- development.yaml
- production.yaml

NextJS는 구성 파일에서 environment variables을 정의할 수 있습니다. 이를 최대한 활용하기 위해 구성 패키지를 가져오고 config.util.toObject()를 사용하여 환경 변수를 구성 변수로 설정합니다. 기본적으로 NextJS는 루트 디렉토리에 next.config.js 파일을 생성합니다. 확장자를 .mjs로 변경하고 내용을 다음으로 바꿉니다.

// next.config.mjs

import config from 'config';

const nextConfig = {
  reactStrictMode: true,
  env: config.util.toObject()
}

이 시점에서 우리는 이미 .env 파일을 교체했습니다. NextJS는 해당 활성 환경과 함께 구성 폴더에서 구성 파일을 로드합니다.

TypeScript와 함께 사용하려면 몇 가지 추가 작업을 수행해야 합니다. 먼저 구성 변수에 대한 유형 선언 파일이 필요합니다. 그런 다음 글로벌 프로세스 환경에 추가해야 합니다.

여기서부터는 더 나은 추적성을 위해 예제를 사용하여 작업할 것입니다.
default.yaml 파일에 몇 가지 항목을 추가해 보겠습니다.

firebase:
  apiKey: apiKey
  appId: appId
  projectId: projectId
  authDomain: authDomain
  databaseURL: databaseURL
  storageBucket: storageBucket
  messagingSenderId: messagingSenderId
  measurementId: measurementId

다음으로 typescript에 구성 변수를 반영해야 합니다. 제 모국어로 이런 말이 있습니다.

Viele Wege führen nach Rom

요컨대 문제에 대한 많은 솔루션이 있음을 의미합니다. 예를 들어 수동으로 수행하거나 웹 기반yaml to typescript 변환기를 사용할 수 있습니다. 불행히도 이 문제에 대한 npm 패키지를 찾을 수 없습니다. 그러나 많은 사람들이 알고 있듯이 10시간 안에 자동화할 수 있는 작업을 왜 10분 안에 처리해야 할까요? 따라서 추가 패키지를 설치해 보겠습니다.

npm install -D ymlts

이제 콘솔에서 구성 파일을 TypeScript로 변환할 수 있습니다. 다음 명령으로 필요한 유형 파일을 만듭니다.

npx ymlts config/default @types/config 

그러면 @types 디렉토리에 config.d.ts가 생성됩니다. 내용은 다음과 같아야 합니다.

// @types/config.d.ts

interface Config {
    firebase: Firebase;
}

interface Firebase {
    apiKey:            string;
    appId:             string;
    projectId:         string;
    authDomain:        string;
    databaseURL:       string;
    storageBucket:     string;
    messagingSenderId: string;
    measurementId:     string;
}

마지막으로 프로세스 환경에 새 구성 유형을 추가해야 합니다. 이를 위해 @types 디렉토리에 global.d.ts 파일을 생성합니다...

@types
- global.d.ts

...구성 유형으로 프로세스 환경을 확장합니다.

// @types/global.d.ts

namespace NodeJS {
  interface ProcessEnv extends Config { }
}

나중에 사용할 수 있도록 정말 게으른 경우: ymlts 명령을 package.json에 추가하고 npm run env로 시작할 수 있습니다.

// package.json

"scripts": {
  "env": "npx ymlts config/default @types/config",
}

결론

왜? 언뜻 보기에 이것은 불필요한 작업처럼 보이지만 몇 가지 깔끔한 작업이 있습니다!

인간 친화적인 YAML 파일로 가독성이 향상되었습니다.

구성된 구성 폴더에서 환경 변수가 관리됩니다.

일반적으로 환경 변수를 browser에 노출하려면 NEXT_PUBLIC_ 접두사를 환경 변수에 붙여야 합니다. 그러나 NextJS는 buildtime에서 환경 변수를 대체하므로 더 이상 사용되지 않습니다.

구성 파일을 유형으로 변환하면 process.env와 함께 intellisense를 사용할 수 있습니다.

YAML 구성 변수는 중첩될 수 있습니다. 예를 들어 이 블로그와 관련하여 initializeApp(process.env.firebase); 로 Firebase 앱을 초기화할 수 있습니다.