본 글에서는 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}은(는) 다음과 같은 오류가 표시됩니다. "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 중국어 웹사이트의 기타 관련 기사를 참조하세요!