0Pricing
TypeScript Academy · レッスン

環境変数の型付けと設定

環境変数を検証・型付けし、NEXT_PUBLICで安全なクライアント向け変数を公開し、サーバーとクライアントの設定を一元管理します

「環境変数の型付けと設定」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全3レッスンが含まれています。

はじめに

目標：検証済みの環境変数を一元化し、型を同期させます。zod で process.env を解析し、型付きのenv オブジェクトをエクスポートして、クライアントには NEXT_PUBLIC_* のみを公開します。

  • 実行時検証
  • サーバーとクライアントへの公開範囲
  • 単一の信頼できる情報源

スキーマとパーサー

server とclient 用に別々のスキーマを作成します。起動時に無効な設定を即座に検出して失敗させます。

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

const serverSchema = z.object({
  NODE_ENV: z.enum(["development", "test", "production"]),
  DATABASE_URL: z.string().url(),
  API_SECRET: z.string().min(1)
})

const clientSchema = z.object({
  NEXT_PUBLIC_API_BASE: z.string().url()
})

function parseEnv<T extends z.ZodTypeAny>(schema: T, source: Record<string, unknown>) {
  const r = schema.safeParse(source)
  if (!r.success) {
    console.error(r.error.format())
    throw new Error("Invalid environment variables")
  }
  return r.data as z.infer<T>
}

export const serverEnv = parseEnv(serverSchema, process.env)
export const clientEnv = parseEnv(clientSchema, process.env)

サーバーでの使用

サーバーファイル（ルートハンドラー、サーバーコンポーネント）では、serverEnv からシークレットにアクセスできます。クライアントには決して公開しないでください。

// app/api/users/route.ts
import { NextResponse } from "next/server"
import { serverEnv } from "@/app/lib/env"

export async function GET() {
  // Safe to read secrets on the server
  const db = serverEnv.DATABASE_URL
  return NextResponse.json({ ok: true, dbConfigured: Boolean(db) })
}

クライアントでの使用

クライアントコンポーネントでは、NEXT_PUBLIC_* 変数を含む clientEnv のみをインポートします。シークレットがブラウザーに送られることはありません。

"use client"
import { clientEnv } from "@/app/lib/env"

export default function ApiBaseNotice() {
  return <small>API base: {clientEnv.NEXT_PUBLIC_API_BASE}</small>
}

アンビエント型定義

アンビエント型定義は process.env の DX を向上させますが、実行時には検証しません。zod によるチェックは維持してください。

// env.d.ts (optional hints; runtime validation still required)
/// <reference types="node" />

declare namespace NodeJS {
  interface ProcessEnv {
    NODE_ENV: "development" | "test" | "production"
    DATABASE_URL?: string
    API_SECRET?: string
    NEXT_PUBLIC_API_BASE?: string
  }
}

ベストプラクティス

ベストプラクティス：

  • クライアントファイルでシークレットを読み込まないでください。
  • 起動時に一度だけ検証し、問題を検出できるよう非本番環境では即座に停止させます。
  • 一貫性とテストのため、環境変数へのアクセスを小さなモジュールの背後にまとめます。

環境変数の型付け確認

確認問題：環境変数の型付けと公開に安全なパターンはどれですか？

まとめ

まとめ：zod で process.env を解析し、型付きの serverEnv/clientEnv をエクスポートして、安全なクライアント公開には NEXT_PUBLIC_* を利用します。

よくある質問

「環境変数の型付けと設定」レッスンは無料ですか？

はい。「環境変数の型付けと設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「環境変数の型付けと設定」で何を学びますか？

環境変数を検証・型付けし、NEXT_PUBLICで安全なクライアント向け変数を公開し、サーバーとクライアントの設定を一元管理します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「環境変数の型付けと設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. App Routerの型、サーバーコンポーネントとクライアントコンポーネント
  2. データ取得とアクションの型付け
  3. 環境変数の型付けと設定
← TypeScript Academyに戻る