如何在 Next.js 中安全配置 T3 Env 环境变量?

摘要:为什么需要专门的环境变量解决方案? 在 Next.js 应用开发中,环境变量管理一直是个棘手问题。传统的 .env 文件方式存在诸多痛点: 类型安全问题:环境变量没有类型检查,容易在运行时出错 验证缺失:无法确保必需的环境变量都已正确配置
为什么需要专门的环境变量解决方案? 在 Next.js 应用开发中,环境变量管理一直是个棘手问题。传统的 .env 文件方式存在诸多痛点: 类型安全问题:环境变量没有类型检查,容易在运行时出错 验证缺失:无法确保必需的环境变量都已正确配置 客户端/服务端混淆:可能意外将敏感变量暴露到客户端 团队协作困难:新成员不知道需要配置哪些环境变量 T3 Env 正是为了解决这些问题而生,它提供了类型安全的环境变量管理方案。 flowchart TD A[".env<br>.env.local<br>…"] --> B["src/env.js<br>createEnv({…})"] B --> C{Zod Schema<br>校验层} C -->|server variables| D["服务端代码<br>getStaticProps / API Routes …"] C -->|client variables| E["客户端代码<br>浏览器 Bundle"] C -->|shared variables| F["两端共享<br>NODE_ENV …"] C -->|非法/缺失| G["运行时抛错<br>构建失败"] style B fill:#FFE082 style C fill:#81C784 style G fill:#EF5350,color:#fff 核心特性 1. 类型安全的环境变量 import { createEnv } from "@t3-oss/env-nextjs"; import { z } from "zod"; const env = createEnv({ server: { DATABASE_URL: z.string().url(), API_SECRET: z.string().min(1), }, client: { NEXT_PUBLIC_API_URL: z.string().url(), }, runtimeEnv: { DATABASE_URL: process.env.DATABASE_URL, API_SECRET: process.env.API_SECRET, NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL, }, }); 2. 运行时验证 库在应用启动时会自动验证所有环境变量,如果缺少必需变量或类型不匹配,会立即抛出清晰错误,而不是在运行时神秘崩溃。 3. 客户端/服务端自动隔离 通过明确的配置区分,确保服务端敏感变量不会意外泄漏到客户端。 配置指南 基础安装与配置 npm install @t3-oss/env-nextjs zod 注意:T3 Env 提供了多个包, 如 @t3-oss/env-nextjs 和 @t3-oss/env-core,分别用于 Next.js 和普通 Node.js 项目。
阅读全文