So wendet Lobechat Typsicherheit auf seine Umgebungsvariablen in der Next-App an

In diesem Artikel erfahren Sie anhand eines Beispiels mehr über die T3-Umgebung und ihre Verwendung. Wir analysieren auch die T3-Env-Nutzung in Lobechat.

T3-Umgebung

Wenn Sie die T3-Env-Website besuchen, steht dort der Titel „Framework-agnostische Validierung für typsichere Umgebungsvariablen“. mit dieser Beschreibung: „Erstellen Sie Ihre Apps nie wieder mit ungültigen Umgebungsvariablen. Validieren und transformieren Sie Ihre Umgebung mit der vollen Kraft von Zod.“

Sie können T3 env verwenden, um typsichere Validierungen auf Ihre Umgebungsvariablen anzuwenden, damit Sie am Ende keine Anwendung mit ungültigen env-Variablen bereitstellen. Aber wie wenden Sie diese Validierungen an? Finden wir es heraus.

Installation

Verwenden Sie den folgenden Befehl, um T3 env in Ihrem Projekt zu installieren.

# 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

Verwendung

Die Verwendung der T3-Umgebung ist einfach. Sie müssen zunächst Ihr Schema wie unten gezeigt definieren:

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

Github-Dokumente für die T3-Umgebung bieten Next.js-basierte Beispiele. Achten Sie besonders auf die Kommentare im obigen Beispiel. Da es sich bei Next.js um ein Full-Stack-Framework handelt, verfügen Sie über Umgebungsvariablen für Server und Client und müssen darauf achten, dass Ihre serverseitigen Umgebungsvariablen nicht

ausgesetzt werden Kunde.

T3 env erfordert, dass Sie Ihre Server-Umgebungstypen im Serverobjekt im Schema definieren.

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

Definieren Sie auf ähnliche Weise die Typen für die clientseitigen Umgebungsvariablen

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

Bisher haben wir die Variablen und ihre Typen nur auf der Client- und Serverseite definiert. Der nächste Schritt besteht darin, runtimeEnv.
zu definieren

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

Verwenden Sie das Schema in Ihrer App mit automatischer Vervollständigung und Typinferenz

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

Sie können env in die Datei importieren, die dies erfordert, und Sie haben jetzt Typsicherheit auf Ihre env-Variablen angewendet mit

automatische Vervollständigung.

Lobechat-Nutzung der T3-Umgebung

Lobechat definiert das Schema, wie oben erläutert, in 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();

Dieser ServerDBEnv wird in server/core/db.ts verwendet.

Anwendungsbeispiel:

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

Über uns:

Bei Thinkthroo studieren wir große Open-Source-Projekte und stellen Architekturführer zur Verfügung. Wir haben mit Rückenwind wiederverwendbare Komponenten entwickelt, die Sie in Ihrem Projekt nutzen können. Wir bieten Next.js-, React- und Node-Entwicklungsdienste an.

Buchen Sie einen Termin mit uns, um Ihr Projekt zu besprechen.

Referenzen

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/

Das obige ist der detaillierte Inhalt vonSo wendet Lobechat Typsicherheit auf seine Umgebungsvariablen in der Next-App an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!