Begini cara Lobechat menggunakan jeniskeselamatan pada pembolehubah persekitarannya dalam apl Seterusnya

Dalam artikel ini, anda akan mempelajari tentang T3 env dan penggunaannya dengan contoh. Kami juga menganalisis penggunaan env T3 dalam Lobechat.

T3 env

Apabila anda melawati tapak web T3 env, ia mempunyai tajuk wira ini "Pengesahan agnostik rangka kerja untuk pembolehubah persekitaran selamat jenis." dengan penerangan ini — “Jangan sekali-kali membina apl anda dengan pembolehubah persekitaran yang tidak sah lagi. Sahkan dan ubah persekitaran anda dengan kuasa penuh Zod.”

Anda boleh menggunakan T3 env untuk menggunakan pengesahan jenis selamat pada pembolehubah persekitaran anda supaya anda tidak akhirnya menggunakan aplikasi dengan pembolehubah env tidak sah. tetapi bagaimana anda menggunakan pengesahan ini? mari kita ketahui.

Pemasangan

Gunakan arahan di bawah untuk memasang T3 env dalam projek anda.

# 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

Penggunaan

Penggunaan env T3 adalah mudah, anda perlu mentakrifkan skema anda terlebih dahulu seperti yang ditunjukkan di bawah:

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

Dokumen Github untuk T3 env menyediakan contoh berasaskan Next.js. Beri perhatian tambahan kepada komen yang diberikan dalam contoh di atas. Memandangkan Next.js ialah rangka kerja timbunan penuh, anda mempunyai pembolehubah env untuk pelayan dan klien dan anda perlu berhati-hati untuk tidak mendedahkan pembolehubah persekitaran sebelah pelayan anda kepada

pelanggan.

env T3 memerlukan anda untuk menentukan jenis env pelayan anda dalam objek pelayan dalam skema.

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

Begitu juga, tentukan jenis untuk pembolehubah persekitaran sebelah klien

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

Setakat ini, kami hanya menentukan pembolehubah dan jenisnya pada bahagian klien dan pelayan. Langkah seterusnya ialah mentakrifkan 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,
},

Gunakan skema dalam apl anda dengan autolengkap dan inferens taip

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

Anda boleh mengimport env dalam fail yang memerlukannya dan anda kini mempunyai jenis-keselamatan digunakan pada pembolehubah env anda dengan

autolengkap.

Penggunaan lobechat bagi T3 env

Lobechat mentakrifkan skema, seperti yang dijelaskan di atas, dalam 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();

PelayanDBEnv ini digunakan dalam pelayan/teras/db.ts.

Contoh penggunaan:

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

Tentang kami:

Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen boleh guna semula, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.

Tempah mesyuarat dengan kami untuk membincangkan projek anda.

Rujukan

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/

Atas ialah kandungan terperinci Begini cara Lobechat menggunakan jeniskeselamatan pada pembolehubah persekitarannya dalam apl Seterusnya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!