【Next.js】Zodを使用した環境変数のバリデーション

はじめに

環境変数を扱うときにZodを使用したバリデーションをすると便利だなと思ったので記事にしました。

process.envを使用すると面倒なこと

• 型がstring|undefindになってしまい、毎回undefindチェックする必要がある。
• 期待するフォーマットでない値でもそのまま使用できてしまいランタイムエラー等が発生する可能性がある。

大袈裟ですがこんなイメージ

// process.envから直接取得
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

// 毎回undefinedチェックを行う必要がある
if (!apiUrl) {
  throw new Error('NEXT_PUBLIC_API_URL is not defined');
}

console.log(apiUrl.toUpperCase()); // これで安全に使用可能

Zodバリデーションをするメリット

• undefindチェック不要ですぐに参照できる。
• バリデーションすることで想定外の値を排除できる。（URL形式が不正など）
• 環境変数が未設定や不正な場合、アプリ起動時にエラーが発生するため、本番環境にデプロイする前に気づくことができる。

環境変数をZodでバリデーションする

utils/env.ts

import { z } from 'zod'

const envSchema = z.object({
  NEXT_PUBLIC_API_URL: z.string().url(),
})

// 環境変数を取得
const parsedEnv = envSchema.safeParse({
  NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
})

// バリデーション結果を処理
if (!parsedEnv.success) {
  console.error('❌ Invalid environment variables:', parsedEnv.error.format())
  throw new Error('Invalid environment variables')
}

export const env = parsedEnv.data

環境変数を参照する

環境変数を参照する場合、このようにundefindチェックを行わずにそのまま使用することができます。

import { env } from '../utils/env'

console.log(env.NEXT_PUBLIC_API_URL)

まとめ

undefindチェックが地味面倒だったのでいい方法だと思いました！