以下是 Lobechat 如何将类型安全应用于 Next 应用程序中的环境变量

在本文中，您将通过示例了解 T3 env 及其用法。我们还分析了 Lobechat 中 T3 env 的使用情况。

T3环境

当您访问 T3 env 网站时，它有一个英雄标题“​​类型安全环境变量的框架不可知验证”。带有这样的描述 - “永远不要再次使用无效的环境变量构建应用程序。利用 Zod 的全部力量验证和改变您的环境。”

您可以使用 T3 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 env 的使用很简单，您首先必须定义您的架构，如下所示：

// 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 env 的 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 变量 自动完成。

T3 env 的 Lobechat 使用

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中文网其他相关文章！