environment-variables について
プロジェクトに環境変数を追加する手順をまとめた開発スキルです。サンプル値、サーバーとクライアントのスキーマ、ビルド設定を扱います。
主な機能
- 01.env.example への変数追加
- 02env.ts でのサーバー・クライアントスキーマ定義
- 03クライアント実行時環境値の設定
- 04turbo.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" ] } } }
例:
-
input: |
サーバー側の API キーを追加する
.env.example
API_KEY=your_api_key_here
env.ts
server: { API_KEY: z.string(), }
turbo.json
"build": { "env": ["API_KEY"] } output: "サーバー側の環境変数が正しく追加されました"
-
input: |
クライアント側の機能フラグを追加する
.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"] } output: "クライアント側の環境変数が正しく追加されました"
参照:
- apps/web/env.ts
- apps/web/.env.example
- turbo.json
コメント
Markdown 対応