前提

環境変数のなかでも、外部に公開して問題ないものに限る。フロントエンドでブラウザから参照される値は全部当てはまる。
なので、以下のお話はフロントエンドに限ったものと考えていただくと良いかも

概要

NEXT_PUBLIC_FOO=hoge

これはもうやめて

export const FOO = 'hoge'

にしたほうが良い説を提唱する

.envのつらみ

静的なチェックが効かない

process.env.NEXT_PUBLIC_FOO

と参照しているのに、.envでNEXT_PUBLIC_FOOを宣言し忘れているとする。基本的に、実行時になるまで気がつけない。

なんなら、実行時になっても気が付けないこともある。以下のように環境変数をそのままリンクに設定した場合に起こりやすい。

<a href={process.env.NEXT_PUBLIC_CONTACT_LINK}>

型定義を別で用意する必要がある

declare namespace NodeJS {
  interface ProcessEnv {
    readonly NEXT_PUBLIC_FOO: string
  }
}

こんなかんじ。環境変数を追加→型定義を追加と二度手間。

env.tsに書いた場合

export const CONTACT_LINK = 'https://contact.example.com'

import { CONTACT_LINK } from '@/env.ts'

<a href={CONTACT_LINK}>

CONTACT_LINKを宣言し忘れていれば、import部分に赤線でエラーが出てくれる。実行前の型チェックの段階で気がつくことができる。

env.tsに宣言すれば型も自動で推論される。いちいち、型定義を別で書く必要がない。

env.tsに書く場合の運用

envs
├── stg.ts # stg環境用
└── prd.ts # prd環境用
src
└── env.ts # 実際にコードで使われるのはこれ

こんな感じで用意するのが一案。なおsrc/env.tsにはローカル用の値を入れておくのが良さそうかも。
(前提にも書いてあるとおり、外部に公開して良い環境変数なのでこのままGit pushしても問題ない)

本番環境用の環境変数を適用したいときは以下の通り。

cp envs/prd.ts src/env.ts