© TOOLS BOX — Next.js / React / TypeScript コードサンプル集

サンプルガイド
←サンプル一覧
nextjsvalidation

Zod で Next.js の環境変数を起動時に検証する

Zod スキーマで環境変数を定義・検証し、未設定の変数をビルド時または起動時に検出する実装例。

難易度: 初級·更新: 2026-04-17·
zod

対応バージョン

nextjs 15zod 3

前提環境

TypeScript の基本と Next.js の環境変数(.env.local)の仕組みを理解していること

概要

環境変数は process.env.FOO で参照すると string | undefined になり、未設定のまま動作し続けてしまう。 Zod で起動時に検証することで、設定漏れをビルドエラーや起動時エラーとして即検出できる。

インストール

npm install zod

実装例

// src/lib/env.ts
import { z } from "zod";

const envSchema = z.object({
  // サーバーサイドのみ(NEXT_PUBLIC_ なし)
  DATABASE_URL: z.string().url("DATABASE_URL は有効な URL である必要があります"),
  API_SECRET_KEY: z.string().min(1, "API_SECRET_KEY が設定されていません"),

  // クライアントサイドでも使う(NEXT_PUBLIC_ 付き)
  NEXT_PUBLIC_API_BASE_URL: z.string().url("NEXT_PUBLIC_API_BASE_URL は有効な URL である必要があります"),
});

// parse に失敗すると ZodError が throw され、起動が止まる
export const env = envSchema.parse({
  DATABASE_URL: process.env.DATABASE_URL,
  API_SECRET_KEY: process.env.API_SECRET_KEY,
  NEXT_PUBLIC_API_BASE_URL: process.env.NEXT_PUBLIC_API_BASE_URL,
});
// src/lib/api/client.ts(env を import して使う)
import { env } from "@/lib/env";

export async function apiFetch(path: string) {
  const res = await fetch(`${env.NEXT_PUBLIC_API_BASE_URL}${path}`, {
    headers: {
      Authorization: `Bearer ${env.API_SECRET_KEY}`,
    },
  });
  if (!res.ok) throw new Error(`API error: ${res.status}`);
  return res.json();
}
# .env.local(設定例)
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
API_SECRET_KEY=your-secret-key
NEXT_PUBLIC_API_BASE_URL=https://api.example.com

ポイント

  • envSchema.parse(...) は失敗時に ZodError を throw するため、未設定・型不一致が起動時に即発覚する
  • process.env の参照を src/lib/env.ts 一か所に集約することで、使う側は env.VARIABLE_NAME と書くだけで型安全になる
  • NEXT_PUBLIC_ なし変数はサーバーサイドのみ参照可能。クライアントで使うには NEXT_PUBLIC_ を付ける
  • z.string().url() / z.string().min(1) などで形式チェックも同時に行える
  • .env.local は .gitignore に含まれていることを確認する(シークレットをコミットしない)

注意点

NEXT_PUBLIC_ プレフィックスのない変数はサーバーサイドのみで使用可能。クライアントサイドで参照したい場合は NEXT_PUBLIC_ を付ける。検証は src/lib/env.ts に集約し、アプリ全体から import して使う。

関連サンプル

同じテーマや技術スタックを使った実装例

  • Zod で外部 API レスポンスを型安全に検証する

    fetch した外部 API レスポンスを Zod スキーマで検証し、型安全なデータとエラーを分離して扱う実装例。

  • React Hook Form でファイルアップロード対応フォームを実装する

    React Hook Form の register でファイル入力を管理し、Zod でファイルサイズ・拡張子バリデーションを行う実装例。

  • Zod スキーマをフォームバリデーションと API レスポンス検証で共有する

    同一の Zod スキーマを React Hook Form のバリデーションと fetch レスポンス検証の両方で再利用し、型定義の重複をなくす実装例。

  • Zod の discriminatedUnion でバリアント型を型安全に処理する

    z.discriminatedUnion を使い、status フィールドで分岐するバリアント型(成功 / エラー / ローディング等)を型安全にパース・絞り込む例。

  • Zod でネストオブジェクト・配列・transform を組み合わせてバリデーションする

    Zod でネストされたオブジェクト・配列のバリデーションと、transform / refine / superRefine を使ったカスタム変換・クロスフィールド検証の例。

関連仕様

このサンプルを理解するのに役立つ仕様や概念

  • FrameworkNext.jsReact ベースのフルスタックフレームワーク。SSR・SSG・App Router・API Routes を提供する。
  • LibraryZodTypeScript ファーストのスキーマバリデーションライブラリ。型推論と実行時バリデーションを同一スキーマで行える。
←サンプル一覧に戻る