关于 environment-variables
用于说明如何在项目中添加环境变量的开发技能,涵盖示例值、服务端与客户端的 Schema,以及构建配置。
主要功能
- 01在 .env.example 中添加变量
- 02在 env.ts 中定义服务端和客户端 Schema
- 03配置客户端运行时环境值
- 04在 turbo.json 中登记构建环境依赖
适用场景
- 01添加服务端 API 密钥
- 02添加客户端功能标志
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ elie222/ inbox-zero --skill environment-variables安装后在 Claude Code 中输入/environment-variables确认已加载。
详细介绍
环境变量
以下是向项目中添加环境变量的方法:
-
添加到
.env.example:NEW_VARIABLE=value_example -
添加到
apps/web/env.ts:// 仅供服务端使用的变量 server: { NEW_VARIABLE: z.string(), } // 客户端使用的变量 client: { NEXT_PUBLIC_NEW_VARIABLE: z.string(), } experimental__runtimeEnv: { NEXT_PUBLIC_NEW_VARIABLE: process.env.NEXT_PUBLIC_NEW_VARIABLE, } -
对于客户端使用的变量:
- 必须以
NEXT_PUBLIC_为前缀 - 添加到
client和experimental__runtimeEnv部分
- 必须以
-
在
turbo.json的globalDependencies下添加:{ "tasks": { "build": { "env": [ "NEW_VARIABLE" ] } } }
示例:
-
输入:|
添加服务端 API 密钥
.env.example
API_KEY=your_api_key_here
env.ts
server: { API_KEY: z.string(), }
turbo.json
"build": { "env": ["API_KEY"] } 输出:"已正确添加服务端环境变量"
-
输入:|
添加客户端功能标志
.env.example
NEXT_PUBLIC_FEATURE_ENABLED=false
env.ts
client: { NEXT_PUBLIC_FEATURE_ENABLED: z.coerce.boolean().default(false), }, experimental__runtimeEnv: { NEXT_PUBLIC_FEATURE_ENABLED: process.env.NEXT_PUBLIC_FEATURE_ENABLED, }
turbo.json
"build": { "env": ["NEXT_PUBLIC_FEATURE_ENABLED"] } 输出:"已正确添加客户端环境变量"
参考:
- apps/web/env.ts
- apps/web/.env.example
- turbo.json
评论
支持 Markdown