Next.jsの環境変数：NEXT_PUBLIC_の使い方と重要性

今回は、Next.jsアプリケーション開発において非常に重要な概念であるNEXT_PUBLIC_環境変数について詳しく解説します。

NEXT_PUBLIC_とは？

NEXT_PUBLIC_は、Next.jsで使用する特別なプレフィックス（接頭辞）です。環境変数の名前の前にこのプレフィックスを付けることで、その環境変数をブラウザ側（クライアントサイド）でも使用できるようになります。

通常、環境変数はサーバーサイドでのみアクセス可能ですが、NEXT_PUBLIC_を付けることで、クライアントサイドのJavaScriptからも安全にアクセスできるようになります。

なぜNEXT_PUBLIC_が必要なのか？

Next.jsアプリケーションを開発する際、以下のような状況でクライアントサイドでも環境変数を使用したいケースがあります：

1. ウェブサイトの設定（タイトル、説明文など）
2. 公開しても問題ないAPIのベースURL
3. 機能のオン/オフを切り替えるフラグ（フィーチャーフラグ）

これらの情報は公開しても問題ない場合が多く、クライアントサイドでも使用できると便利です。そこで登場するのがNEXT_PUBLIC_プレフィックスです。

NEXT_PUBLIC_と通常の環境変数の違い

NEXT_PUBLIC_の使い方

1. 環境変数の設定

まず、プロジェクトのルートディレクトリに.env.localファイルを作成し、そこに環境変数を記述します。

NEXT_PUBLIC_SITE_TITLE=My Awesome Blog
NEXT_PUBLIC_API_URL=https://api.myapp.com
NEXT_PUBLIC_ENABLE_NEW_FEATURE=true

2. コード内での使用

設定した環境変数は、process.env.NEXT_PUBLIC_変数名の形式でアクセスできます。

// ページのタイトルを設定
<title>{process.env.NEXT_PUBLIC_SITE_TITLE}</title>

// APIリクエストを送信
fetch(`${process.env.NEXT_PUBLIC_API_URL}/users`)

// 新機能の表示を制御
{process.env.NEXT_PUBLIC_ENABLE_NEW_FEATURE === 'true' && <NewFeature />}

注意点とベストプラクティス

declare namespace NodeJS {
  interface ProcessEnv {
    NEXT_PUBLIC_API_URL: string;
    NEXT_PUBLIC_ENABLE_NEW_FEATURE: string;
  }
}