Lobechat が Next アプリの環境変数にタイプセーフティを適用する方法は次のとおりです。

この記事では、T3 env とその使用法について例を示しながら学びます。また、Lobechat での T3 環境の使用状況も分析します。

T3 環境

T3 env Web サイトにアクセスすると、「タイプセーフな環境変数のフレームワークに依存しない検証」というヒーロー タイトルが表示されます。この説明には、「無効な環境変数を使用してアプリを二度とビルドしないでください。 Zod のフルパワーで環境を検証し、変革しましょう。」

T3 env を使用して環境変数にタイプセーフ検証を適用できるため、無効な環境変数を使用してアプリケーションをデプロイすることを避けることができます。しかし、これらの検証をどのように適用するのでしょうか?調べてみましょう。

インストール

以下のコマンドを使用して、プロジェクトに T3 env をインストールします。

# Core package, no framework specific features
pnpm add @t3-oss/env-core zod
# or, with options preconfigured for Next.js
pnpm add @t3-oss/env-nextjs zod

使用法

T3 環境の使用法は簡単です。まず、以下に示すようにスキーマを定義する必要があります。

// src/env.mjs
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: {
 DATABASE_URL: z.string().url(),
 OPEN_AI_API_KEY: z.string().min(1),
 },
 /*
 * 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: {
 DATABASE_URL: process.env.DATABASE_URL,
 OPEN_AI_API_KEY: process.env.OPEN_AI_API_KEY,
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
 process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
 },
});

T3 環境の Github ドキュメントでは、Next.js ベースの例が提供されています。上記の例で提供されているコメントに特に注意してください。 Next.js はフルスタック フレームワークであるため、サーバーとクライアントの環境変数があり、サーバー側の環境変数を

に公開しないように注意する必要があります。 クライアント。

T3 環境では、スキーマのサーバー オブジェクトでサーバー環境タイプを定義する必要があります。

/*
* Serverside Environment variables, not available on the client.
* Will throw if you access these variables on the client.
*/
server: {
 DATABASE_URL: z.string().url(),
 OPEN_AI_API_KEY: z.string().min(1),
},

同様に、クライアント側の環境変数の型を定義します

/*
 * 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),
},

これまでは、クライアント側とサーバー側で変数とその型を定義しただけでした。次のステップは、runtimeEnv.
を定義することです。

/*
* 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: {
 DATABASE_URL: process.env.DATABASE_URL,
 OPEN_AI_API_KEY: process.env.OPEN_AI_API_KEY,
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
 process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
},

オートコンプリートと型推論を備えたアプリでスキーマを使用する

// src/app/hello/route.ts
import { env } from "../env.mjs";
export const GET = (req: Request) => {
 const DATABASE_URL = env.DATABASE_URL;
 // use it…
};

env を必要とするファイルに env をインポートすると、

を使用して env 変数にタイプ セーフティが適用されます。 オートコンプリート。

Lobechat での T3 環境の使用法

Lobechat は、上で説明したように、src/config/db.ts でスキーマを定義します。

import { createEnv } from '@t3-oss/env-nextjs';
import { z } from 'zod';
export const getServerDBConfig = () => {
 return createEnv({
 client: {
 NEXT_PUBLIC_ENABLED_SERVER_SERVICE: z.boolean(),
 },
 runtimeEnv: {
 DATABASE_DRIVER: process.env.DATABASE_DRIVER || 'neon',
 DATABASE_TEST_URL: process.env.DATABASE_TEST_URL,
 DATABASE_URL: process.env.DATABASE_URL,
DISABLE_REMOVE_GLOBAL_FILE: process.env.DISABLE_REMOVE_GLOBAL_FILE === '1',
KEY_VAULTS_SECRET: process.env.KEY_VAULTS_SECRET,
NEXT_PUBLIC_ENABLED_SERVER_SERVICE: process.env.NEXT_PUBLIC_SERVICE_MODE === 'server',
 },
 server: {
 DATABASE_DRIVER: z.enum(['neon', 'node']),
 DATABASE_TEST_URL: z.string().optional(),
 DATABASE_URL: z.string().optional(),
DISABLE_REMOVE_GLOBAL_FILE: z.boolean().optional(),
KEY_VAULTS_SECRET: z.string().optional(),
 },
 });
};
export const serverDBEnv = getServerDBConfig();

このserverDBEnvはserver/core/db.tsで使用されます。

使用例:

import { serverDBEnv } from '@/config/db';
//
let connectionString = serverDBEnv.DATABASE_URL;

私たちについて:

Thinkthroo では、大規模なオープンソース プロジェクトを研究し、アーキテクチャ ガイドを提供しています。私たちは、tailwind で構築された、プロジェクトで使用できる再利用可能なコンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。

プロジェクトについて話し合うためのミーティングを予約してください。

参考文献

1. https://github.com/t3-oss/t3-env

2. https://github.com/lobehub/lobe-chat/blob/main/src/config/db.ts

3. https://env.t3.gg/

以上がLobechat が Next アプリの環境変数にタイプセーフティを適用する方法は次のとおりです。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。