Lobechat이 Next 앱의 환경 변수에 유형 안전성을 적용하는 방법은 다음과 같습니다.

이 글에서는 예시를 통해 T3 env와 사용법에 대해 알아봅니다. Lobechat에서도 T3 환경 사용량을 분석합니다.

T3 환경

T3 env 웹사이트를 방문하면 '유형이 안전한 환경 변수에 대한 프레임워크 독립적 검증'이라는 제목이 있습니다. 이 설명과 함께 — “다시는 유효하지 않은 환경 변수로 앱을 빌드하지 마세요. Zod의 모든 기능을 활용하여 환경을 검증하고 변화시키세요.”

T3 env를 사용하면 환경 변수에 유형이 안전한 유효성 검사를 적용할 수 있으므로 잘못된 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 env에서는 스키마의 서버 개체에 서버 환경 유형을 정의해야 합니다.

/*
* 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 변수에 유형 안전성이 적용됩니다. 자동 완성.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!