【Next.js】T3Envで環境変数の読み込み

Next.jsプロジェクトでもPythonのpydantic-settingsのように、アプリの起動時に必要なすべての環境変数の読み込みとバリデーションを行いたかったので、それができるライブラリを調べてみました。

インストール

pnpm add @t3-oss/env-nuxt zod

使い方

環境変数の定義

createEnv の引数の設定項目:

• server
  サーバー側でのみ使用できる環境変数の型定義(スキーマ)
• client
  クライアント側でも使用できる環境変数の型定義(スキーマ)
• runtimeEnv
  定義したスキーマと実際の環境変数の値の紐づけ

src/env.ts

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';

export const env = createEnv({
  server: {
    NODE_ENV: z.enum(['development', 'production', 'test']).default('development'),

    // Keycloak OIDC Authentication
    AUTH_KEYCLOAK_ID: z.string().min(1),
    AUTH_KEYCLOAK_SECRET: z.string().min(1),
    AUTH_KEYCLOAK_ISSUER: z.string().min(1),
    AUTH_SECRET: z.string().min(1),
    NEXTAUTH_URL: z.string().min(1),
  },
  client: {
    NEXT_PUBLIC_API_URL: z.string().url(),
  },
  runtimeEnv: {
    NODE_ENV: process.env.NODE_ENV,

    // Keycloak OIDC Authentication
    AUTH_KEYCLOAK_ID: process.env.AUTH_KEYCLOAK_ID,
    AUTH_KEYCLOAK_SECRET: process.env.AUTH_KEYCLOAK_SECRET,
    AUTH_KEYCLOAK_ISSUER: process.env.AUTH_KEYCLOAK_ISSUER,
    AUTH_SECRET: process.env.AUTH_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    
    // client側の環境変数
    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
  },
});

next.config.ts で env.ts をインポートしておくと、ビルド時に環境変数が自動的に検証されるため、のちの時間と手間を節約できます。

next.config.ts

import "@/env";
 
/** @type {import('next').NextConfig} */
const nextConfig: NextConfig = {
  /** ... */
};
 
export default nextConfig;

呼び出し側の使い方

環境変数を利用する場合は以下のように利用します。

import { env } from '@/env'
console.log(env.NEXTAUTH_URL)