ちょっとした背景

しばらくコーディングをしていれば、環境変数の重要性とそれが果たす役割を知っているでしょうし、プロジェクトに環境変数が設定されていないという理由だけで発生したバグを特定する苦労も知っているでしょう。 、 笑！

今年の初め、私は製品ベースのスタートアップでフルスタック開発者のインターンとして働いていました。プロジェクトが成長するにつれて、環境変数の数も増加しました。そして、誰もが別々のブランチで別々の機能に取り組んでいたため、誰かがブランチに新しい環境変数を導入し、後でメイン ブランチにマージされたかどうかはわかりませんでした。これにより、ブランチをデプロイしようとしたときに問題が発生しました。新しい環境変数がプロジェクトに追加されたことはわかっていました。

その後、T3 スタックを紹介されましたが、そこには環境変数に型安全性を追加するための素晴らしいソリューションがありました。そのような解決策が存在することさえ知りませんでした。まったく予期していなかったときに新しいことを学ぶのはいつも良い気分です。 T3 スタックは、zod と @t3-oss/env-nextjs パッケージを使用して、アプリケーションにタイプ セーフティを追加します。これは私にとって非常に気に入りました。それ以来、私は環境変数を常にタイプセーフにすることを約束しました。

新しいプロジェクトを開始している場合、またはすでにチームで作業している場合は、env にタイプ セーフティを追加することを強くお勧めします。これを追加するだけで、コードベースの問題を解決するための労力を節約できます。

プロジェクトに追加する方法はこちらをご覧ください。とてもシンプルです。

ゾッドとは何ですか？

Zod は、軽量で高速なスキーマ宣言および検証ライブラリです。スキーマは、単純な文字列、数値から複雑なオブジェクト タイプまで何でも構いません。

基本的な使い方

import {z} from 'zod';

const myBoolean = z.boolean();

myBoolean.parse('true'); // throws error
myBoolean.parse(true) // valid

ネストされたオブジェクトスキーマの作成

import { z } from 'zod';

const userSchema = z.object({
    name: z.string(),
    age: z.number(),
    address: z.object({
        house_no: z.string(),
        locality: z.string(),
        city: z.string(),
        state: z.string(),
    })
});

単純なオブジェクト スキーマを作成することも、ネストされたオブジェクト スキーマを作成することもできます。

t3-oss/env-nextjs とは何ですか?

これは、環境変数に型安全性を追加するのに役立つ単なるパッケージです

タイプセーフな環境変数を作成しましょう

プロジェクトのルートに env.js ファイルを作成します。

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

export const env = createEnv({
  /*
   * Serverside Environment variables, not available on the client.
   * Will throw if you access these variables on the client.
   */
  server: {
    DB_URI: z.string().url(),
  },
  /*
   * Environment variables available on the client (and server).
   *
   * You'll get type errors if these are not prefixed with NEXT_PUBLIC_.
   */
  client: {
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
  },
  /*
   * Due to how Next.js bundles environment variables on Edge and Client,
   * we need to manually destructure them to make sure all are included in bundle.
   *
   * You'll get type errors if not all variables from `server` & `client` are included here.
   */
  runtimeEnv: {
    DB_URI: process.env.DATABASE_URL,
    NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
      process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
  },
});

使用法

import {env} from '@/env';

const CLERK_PUBLISHABLE_KEY = env.NEXT_PUBLISHABLE_KEY;

NEXT_PUBLISHABLE_KEY の上にカーソルを置くと、その値が文字列として入力されていることがわかります。これは、環境変数が現在入力されていることを意味します。

タイプ セーフな環境変数を追加しましたが、これはビルド時に毎回実行されるわけではありません。新しく作成したファイルを next.config.js ファイルにインポートする必要があります。そのためには unjs/jiti パッケージを使用できます。

まず、npm から jiti パッケージをインストールします。

import { fileURLToPath } from "node:url";
import createJiti from "jiti";
const jiti = createJiti(fileURLToPath(import.meta.url));

jiti("./app/env");

import.meta.url を使用する場合、現在作業しているファイルの URL が提供されます。ただし、これには file:/// プレフィックスが含まれていますが、これは望ましくない可能性があります。このプレフィックスを削除するには、node:url モジュールの fileURLToPath 関数を使用できます。

例えば：

import {fileURLToPath} from 'node:url';

// Convert the file URL to a path
const filename = fileURLToPath(import.meta.url);

必要な環境変数がない場合は、次のようなエラーが表示されます -

Node.js プロジェクトの環境変数にタイプ セーフティを追加するにはどうすればよいですか?

import dotenv from "dotenv";
import { z } from "zod";

dotenv.config();

const schema = z.object({
  MONGO_URI: z.string(),
  PORT: z.coerce.number(),
  JWT_SECRET: z.string(),
  NODE_ENV: z
    .enum(["development", "production", "test"])
    .default("development"),
});

const parsed = schema.safeParse(process.env);

if (!parsed.success) {
  console.error(
    "❌ Invalid environment variables:",
    JSON.stringify(parsed.error.format(), null, 4)
  );
  process.exit(1);
}

export default parsed.data;

Node.js プロジェクトでは、単純に zod スキーマを作成し、それを process.env に対して解析して、すべての環境変数が設定されているかどうかを確認します。

使用法

import express from "express";
import env from "./env";

const app = express();
const PORT = env.PORT || 5000; // PORT is type safe here....

app.listen(PORT, () => {
console.log("Connected to server on PORT ${PORT}");
connectDB();
});

これが、環境変数にタイプ セーフティを追加する方法です。このチュートリアルで何か新しいことを学んでいただければ幸いです。

コーディングを楽しんでください!! ?