TL;DR

このページでは、Next.js と TypeScript を使用した環境変数のスマートな管理について解説します。環境変数はアプリケーションの設定を管理する上で非常に重要な要素であり、Next.js と TypeScript が提供する機能を最大限に活用することで、簡潔で可読性の高いコードを作成することができます。

環境変数とは？

環境変数は、システムやアプリケーションの動作を制御するための変数で、データベースの接続情報や外部サービスの API キーなど、アプリケーションの設定や機密情報を保管するために用いられます。これらの情報は、ソースコードから分離して管理されるべきであり、それを可能にするのが環境変数です。

NEXT_PUBLIC の役割

Next.js では環境変数の名前が NEXT_PUBLIC_ で始まる場合、その環境変数はブラウザの実行コンテキストでも利用できるようになります。これは、Next.js がサーバーサイドとクライアントサイドの両方で動作するフレームワークであるための特別な仕様です。

NEXT_PUBLIC_ プレフィックスが付いていない環境変数は、デフォルトではサーバーサイドでのみ利用でき、クライアントサイドの JavaScript からはアクセスできません。これは、秘密情報（例えば API キー）などをブラウザから直接参照できないようにするためのセキュリティ対策です。

例えば、NEXT_PUBLIC_ をつけずに、Google Analytics や、ドメイン名を環境変数に設定しても、ブラウザでは反映されません。これは、ブラウザから直接参照できないようにするための仕様だからです。

公開情報や設定情報など、クライアントサイドでも利用したい環境変数が存在する場合には、その環境変数の名前を NEXT_PUBLIC_ で始めることで、クライアントサイドでも利用できるようになります。

環境変数の設定方法

Google Analytics やベース URL などの公開可能な情報は、Next.js の環境変数として設定できます。NEXT_PUBLIC_という接頭語をつけた環境変数は、ブラウザサイドのコードでアクセス可能となります。

まず、.env.local ファイルをプロジェクトのルートディレクトリに作成します。そして、以下のように Google Analytics のトラッキング ID とベース URL を設定します。

NEXT_PUBLIC_GOOGLE_ANALYTICS_ID=YourGoogleAnalyticsID
NEXT_PUBLIC_BASE_URL=https://your-website.com

これにより、Next.js アプリケーションでは以下のように環境変数を参照することが可能になります。

// Google Analytics IDの参照
const gaId = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID

// ベースURLの参照
const baseUrl = process.env.NEXT_PUBLIC_BASE_URL

// サンプルコンポーネント
const SampleComponent = () => {
  return (
    <div>
      <h1>Welcome to {baseUrl}</h1>
      <p>We use Google Analytics. Our ID is {gaId}</p>
    </div>
  )
}

Google Analytics のトラッキング ID を実際に使用するには、別途 Google Analytics のセットアップが必要となります。それについては Google の公式ドキュメンテーションを参照してください。

同様に、ベース URL は通常、API エンドポイントの参照やリダイレクトの設定などに使用されます。

なお、環境変数はセンシティブな情報を含む可能性がありますので、.env.local ファイルは絶対にソースコード管理システム（例えば Git）にはコミットしないように注意してください。.gitignoreファイルに .env.local を追加して、誤ってコミットされるのを防ぎましょう。

以上の手順により、Google Analytics の ID やベース URL などの環境固有の情報を安全に管理することが可能となります。

Vercel での環境変数の設定方法

Next.js の開発チームが作った Vercel は、Next.js のアプリケーションをデプロイするための優れたプラットフォームです。Vercel では、プロジェクトの設定画面から環境変数を設定することができます。

具体的な手順は以下の通りです。

1. Vercel のダッシュボードにログインし、対象のプロジェクトを選択します。
2. プロジェクトの設定画面に移動します。
3. 左側のメニューから "Environment Variables" を選択します。
4. "Add" ボタンをクリックします。
5. "Name" フィールドに環境変数の名前（NEXT_PUBLIC_ を先頭につける）を入力し、"Value" フィールドにその値を入力します。
6. "Add" ボタンをクリックして環境変数を追加します。

以上の手順で環境変数が Vercel 上に設定され、デプロイ時に利用することが可能となります。また、Vercel はローカルの .env.local ファイルと同期する機能も提供しており、これを利用することでローカルとデプロイ先の環境変数を一致させることが容易になります。

NEXT_PUBLIC_ を用いる主なケースとしては、クライアントサイドで必要となる設定情報や、公開情報を管理する場面が挙げられます。Google Analytics のトラッキング ID やベース URL のような情報以外にも、以下のような情報を扱う場合に NEXT_PUBLIC_ を用いると便利です。

API のエンドポイント

サードパーティの API エンドポイントや、自身のバックエンドのエンドポイントなど、クライアントサイドから直接参照する必要がある URL を管理する際に便利です。

プラットフォームキー

フロントエンドから直接参照する必要がある、Stripe や Mapbox などの公開可能な API キーを管理する際に用います。ただし、秘密情報を含むキーについてはサーバーサイドで管理する必要があります。

アプリケーションの動作を制御するフラグ

例えば、デバッグモードやメンテナンスモードの ON/OFF など、アプリケーションの動作を制御するためのフラグを管理する場面でも用います。

テーマの色

ユーザーが動的に色を変更できる UI を持つアプリケーションの場合、それらの色情報を環境変数として管理することもあります。

以上のように、クライアントサイドから参照が必要であり、かつセキュリティ上公開しても問題ない情報を NEXT_PUBLIC_ を用いて管理することが一般的です。ただし、API キーや他の秘密情報については、公開によるセキュリティリスクを理解した上で適切に管理する必要があります。

Vercel で環境変数を設定するメリット

Vercel に環境変数を設定するメリットについては以下の通りです。

• セキュリティの強化：Vercel は、環境変数を安全に保存・管理するための機能を提供します。これにより、機密情報が漏えいするリスクを軽減することができます。

• 一元化された管理：Vercel では、全ての環境（開発、プレビュー、本番）の環境変数を一箇所で管理することができます。これにより、設定の追跡と管理が容易になります。

• 環境ごとの設定：Vercel では、開発、プレビュー、本番の各環境で異なる環境変数を設定することが可能です。これにより、各環境で異なる設定を行うことができます。

このように、Vercel で環境変数を設定することにより、セキュリティの強化、一元化された管理、そして環境ごとの設定といったメリットが得られます。また、設定変更をコードベースではなく Vercel の設定画面で行うことで、誤って機密情報を公開リポジトリにプッシュするリスクも軽減できます。

.env.development と、.env.production の違い

Next.js は .env ファイルを用いて、アプリケーションの異なる環境（開発環境、本番環境など）で異なる設定を行うことができます。具体的には、以下のようなフィールドが存在します。

.env.development

ローカルの開発環境でのみ使用される環境変数を設定します。開発環境特有の設定や、機密でないダミーの値（API キーや DB 接続情報など）を設定するのに用います。

.env.production

本番環境でのみ使用される環境変数を設定します。実際に公開されるアプリケーションで使用する値（API キーや DB 接続情報など）を設定します。

process.env

Next.js では、環境変数を管理するための process.env オブジェクトが提供されています。これを利用して環境変数を参照することができます。次に示すのは、その一例です。

// ファイル名: pages/index.tsx

const HomePage = () => {
  return <div>{process.env.NEXT_PUBLIC_GREETING}</div>
}

export default HomePage

ここでは、process.env.NEXT_PUBLIC_GREETING を参照しています。NEXT_PUBLIC_GREETING は環境変数の一つで、これを .env.local ファイルなどに設定しておくことで、Next.js のアプリケーションから参照することができます。

環境変数の型定義

上述したように、Next.js で環境変数を利用するときは process.env を通じて参照しますが、TypeScript を用いている場合には環境変数の型を定義することで、型安全にコードを書くことが可能です。

// ファイル名: types/env.d.ts

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      NEXT_PUBLIC_GREETING: string
    }
  }
}

export {}

ここでは、NEXT_PUBLIC_GREETING 環境変数の型を string として定義しています。これにより、環境変数を参照する際に TypeScript の型チェックを受けることができます。

Emotion での利用

Emotion は CSS-in-JS の一つで、JavaScript から CSS を扱うことが可能です。これを用いて、環境変数に基づいたスタイルの変更を行うことができます。

// ファイル名: components/StyledGreeting.tsx
import { css } from '@emotion/react'

type Props = {
  greeting: string
}

const StyledGreeting = ({ greeting }: Props) => {
  const style = css`
    color: ${process.env.NEXT_PUBLIC_COLOR};
  `

  return <div css={style}>{greeting}</div>
}

export default StyledGreeting

ここでは、process.env.NEXT_PUBLIC_COLOR 環境変数を用いて文字色を設定しています。環境変数を用いてスタイルを動的に変更することで、異なる環境で異なるスタイルを適用することが可能となります。

テスト環境変数

テスト環境での環境変数は、アプリケーションのテスト（単体テスト、統合テスト、エンドツーエンドテストなど）を行う際に必要となる設定情報を管理します。これらの環境変数は、テスト環境専用の設定情報や、機密でないダミーデータを設定するのに使用されます。

具体的には、test.env ファイルを作成し、その中にテスト環境でのみ必要な環境変数を設定することが一般的です。また、Jest のようなテストランナーを使用する場合、テスト実行時にこの test.env ファイルをロードする設定を行います。

// test.env
NEXT_PUBLIC_API_URL=http://localhost:4000
DB_USER=test-user
DB_PASSWORD=test-password

テスト環境変数の主な用途は以下の通りです：

• ダミーデータ：テスト環境変数を用いて、テストケースで使用するダミーデータを設定します。これにより、テストが一貫性を持ち、再現性を確保することができます。

• テスト環境の設定：テスト DB への接続情報や、テスト専用の API エンドポイントなど、テスト環境専用の設定を管理します。

• フィーチャーフラグ：テスト中に特定の機能を有効化/無効化するためのフラグを設定することもあります。

このように、テスト環境変数を適切に設定することで、テストの安定性と再現性を向上させ、アプリケーションの品質を確保することが可能になります。ただし、テスト環境変数も他の環境変数と同様に、適切に管理し、機密情報が漏えいしないように注意する必要があります。