Tnv 소스 코드의 ClientOptions 인터페이스 설명

본 글에서는 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의 라인을 따라 예상할 수 있지만 t3-env가 정의하는 방식은 다릅니다. T3 Env 소스코드에서 선정한 아래의 Type을 살펴보세요.

export interface ClientOptions,
> {
 /**
 * 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;
 }>;
}

이것은 일반 유형을 사용하고 TClient는 Record 유형이지만 클라이언트에는 이 유형이 없습니다. 대신 클라이언트에 정의된 키에 앞에 붙은 키가 무엇인지 확인하는 검사가 있습니다. ClientPrefix에 정의하세요.

예를 들어 접두사를 “NEXT_PUBLIC_”으로 정의하고 “NEXT_PBULIC_” 접두사가 붙지 않은 키를 사용하여 일부 변수를 정의하려고 하면 “{variable}은(는) 다음과 같은 오류가 표시됩니다. "NEXT_PBULIC_" 접두사가 붙음

이 기능은 실수로 서버 측 변수를 클라이언트 측에 노출하는 것을 방지하는 Next.js와 같은 프레임워크에서 강력합니다.

이 문서를 확인하세요 — https://env.t3.gg/docs/core#create-your-schema, 접두사 오류에 대해 설명합니다.

회사 소개:

Thinkthroo에서는 대규모 오픈소스 프로젝트를 연구하고 아키텍처 가이드를 제공합니다. 우리는 귀하의 프로젝트에서 사용할 수 있는 tailwind로 구축된 재사용 가능한 구성 요소를 개발했습니다. Next.js, React, Node 개발 서비스를 제공합니다.

귀하의 프로젝트에 대해 논의하려면 회의를 예약하세요.

참고자료:

1. https://github.com/t3-oss/t3-env/blob/main/packages/core/src/index.ts#L130

2. https://env.t3.gg/docs/core#create-your-schema

위 내용은 Tnv 소스 코드의 ClientOptions 인터페이스 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!