はじめに

Next.jsを使用していると、開発・本番環境に応じた設定を手軽に管理するために、環境変数が重要な役割を果たします。APIキーやデータベース接続情報、または環境ごとに異なるURLなど、機密性の高い情報や柔軟な設定を行うために、Next.jsでは環境変数の仕組みが提供されています。

この記事では、Next.jsでの環境変数の設定方法や、クライアントサイドとサーバーサイドでの使用方法、そして重要なNEXT_PUBLIC_プレフィックスの役割について詳しく解説します。

環境変数の設定

Next.jsで使用できる .envファイルにはいくつかの種類があり、それぞれ異なる用途や環境に合わせて読み込まれます。Next.jsは、プロジェクトのルートディレクトリにある.envファイルを自動的に読み込みますが、どのファイルが使われるかは環境に応じて決まります。

.env ファイルの種類

.env.local

• 用途: ローカルの開発環境や特定の開発者ごとの設定で使われます。
• 優先度: 一番高い優先度で読み込まれます。
• 特徴: 本番環境では使用されません。通常、Gitの管理対象から除外するために.gitignoreに追加されます。各開発者が個別に使用する設定を記述するのに便利です。

.env.development

• 用途: 開発環境専用の環境変数を設定します。
• 優先度: .env.localに次ぐ優先度です。
• 特徴: next devでNext.jsの開発モードが起動されたときにのみ使用されます。

.env.production

• 用途: 本番環境専用の環境変数を設定します。
• 優先度: .env.localおよび.env.developmentよりも低い優先度です。
• 特徴: next buildでNext.jsのビルドが実行される際、本番環境で使用されます。

.env.test

• 用途: テスト環境専用の環境変数を設定します。
• 優先度: .env.localの次に高い優先度で、.env.productionよりも優先されます。
• 特徴: テスト環境でnext testなどのコマンドが実行された際に使用されます。

.env

• 用途: 環境に依存しない共通の設定を行います。
• 優先度: 最も低い優先度です。
• 特徴: 特定の環境（開発・本番・テスト）に関わらず共通して使用されます。.envファイルに記述された内容は他の.env.*ファイルで上書きされます。

.env ファイルの優先度

Next.jsでは、以下の順序で環境変数が読み込まれます（上にあるものほど優先されます）。

1. .env.local: ローカル専用の環境変数。最も優先度が高い。
2. .env.[environment]: 現在の環境に応じた環境変数（例:.env.development,.env.production,.env.test）。
3. .env: 環境に依存しないデフォルトの環境変数。最も優先度が低い。

.env.local

API_URL=http://localhost:3000

.env.development

API_URL=http://dev.example.com

.env

API_URL=http://example.com

開発環境 (next dev) で動作させる場合、API_URLの値は.env.localに記述されたhttp://localhost:3000が使用されます。これが一番優先度が高いためです。

本番環境 (next buildおよびnext start) では、.env.localが無視されるため、.env.productionや.envに記述された値が使用されます。

NEXT_PUBLIC_ プレフィックスについて

Next.jsの環境変数は、通常サーバーサイドでのみ使用できます。しかし、クライアントサイド（ブラウザ側）で使用したい環境変数には、変数名にNEXT_PUBLIC_というプレフィックスをつける必要があります。

NEXT_PUBLIC_プレフィックスが付いている環境変数は、クライアントサイドのJavaScriptコードからアクセス可能になります。NEXT_PUBLIC_が付いていない環境変数は、サーバーサイドでのみアクセス可能です。

.env.local

DATABASE_URL=mysql://username:password@localhost:3306/mydatabase
NEXT_PUBLIC_API_URL=https://api.example.com

DATABASE_URLはサーバーサイドでのみ利用可能。NEXT_PUBLIC_API_URLはクライアントサイドとサーバーサイドの両方で利用可能。

環境変数の使用

Next.js内で環境変数にアクセスするには、以下のようにprocess.envを使用します。

サーバーサイドのみで使うには以下のように記述します。

export async function getServerSideProps() {
  const dbUrl = process.env.DATABASE_URL;
  // サーバーサイド処理
  return { props: { dbUrl } };
}

クライアントサイドで使うには以下のように記述します（NEXT_PUBLIC_が必要）。

export default function Home() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  return <div>API URL: {apiUrl}</div>;
}

ビルド時の注意点

Next.jsの環境変数は、ビルド時に読み込まれるため、変数の値を変更した場合、アプリケーションを再ビルドする必要があります。

npm run build

環境変数の変更を反映させるためには、アプリケーションの再起動やビルドを行うことが必要です。

まとめ

Next.jsの環境変数は、アプリケーションのセキュリティと柔軟性を向上させるために不可欠です。正しく設定することで、異なる環境での開発がスムーズになり、また必要に応じてクライアントサイドにも適切な情報を提供できます。

今回紹介したNEXT_PUBLIC_の使い方や、環境別の設定方法を活用して、効率的かつ安全なNext.jsプロジェクトを構築しましょう。