この記事では、T3 Env の関数である createEnv パラメーターでクライアント オブジェクトに提供される ClientOptions インターフェイスを分析します。 t3-env の簡単な使用法を以下に示します。
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, }, });
クライアント オブジェクトのタイプ/インターフェイスを調べることに興味があります。
client: { NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1), },
すぐに、この型は Record
export interface ClientOptions< TPrefix extends string | undefined, TClient extends Record<string, ZodType>, > { /** * The prefix that client-side variables must have. This is enforced both at * a type-level and at runtime. */ clientPrefix: TPrefix; /** * Specify your client-side environment variables schema here. This way you can ensure the app isn't * built with invalid env vars. */ client: Partial<{ [TKey in keyof TClient]: TKey extends `${TPrefix}${string}` ? TClient[TKey] : ErrorMessage<`${TKey extends string ? TKey : never} is not prefixed with ${TPrefix}.`>; }>; }
これはジェネリック型を使用しており、TClient の型は Record
たとえば、プレフィックスを「NEXT_PUBLIC_」として定義し、「NEXT_PBULIC_」のプレフィックスが付いていないキーで変数を定義しようとすると、「{variable} is not」という行に沿ったエラーが表示されます。接頭辞「NEXT_PBULIC_」
これは、サーバー側の変数を誤ってクライアント側に公開したくない Next.js のようなフレームワークで強力です。
このドキュメントを確認してください — https://env.t3.gg/docs/core#create-your-schema、これはプレフィックス エラーについて説明しています。
Thinkthroo では、大規模なオープンソース プロジェクトを研究し、アーキテクチャ ガイドを提供しています。私たちは、tailwind で構築された、プロジェクトで使用できる再利用可能なコンポーネントを開発しました。 Next.js、React、Node 開発サービスを提供します。
プロジェクトについて話し合うためのミーティングを予約してください。
https://github.com/t3-oss/t3-env/blob/main/packages/core/src/index.ts#L130
https://env.t3.gg/docs/core#create-your-schema
以上がTnv ソース コードの ClientOptions インターフェイスの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。