mcpField
E
environment-variables

environment-variables

github.com/elie222開発12.8k39 回インストール今日更新
リポジトリ

environment-variables について

プロジェクトに環境変数を追加する手順をまとめた開発スキルです。サンプル値、サーバーとクライアントのスキーマ、ビルド設定を扱います。

主な機能

  1. 01.env.example への変数追加
  2. 02env.ts でのサーバー・クライアントスキーマ定義
  3. 03クライアント実行時環境値の設定
  4. 04turbo.json へのビルド環境依存関係の登録

活用シーン

  1. 01サーバー側 API キーの追加
  2. 02クライアント側機能フラグの追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/elie222/inbox-zero --skill environment-variables

インストール後、Claude Code で/environment-variablesを入力して読み込まれたか確認します。

詳細

環境変数

プロジェクトに環境変数を追加する方法は次のとおりです。

  1. .env.example に追加します。

    NEW_VARIABLE=value_example
    
  2. 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,
    }
    
  3. クライアント側の変数の場合:

    • NEXT_PUBLIC_ を接頭辞として付ける必要があります
    • client セクションと experimental__runtimeEnv セクションの両方に追加します
  4. 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

コメント