Vercelデプロイ設定をClaudeと最適化する

Claude CodeでVercel設定ファイルを生成する

Next.jsプロジェクトをVercelにデプロイする際、vercel.jsonの設定を一から書くのは意外と手間がかかります。Claude Codeを使えば、プロジェクト構成を読み取って最適な設定ファイルを自動生成できます。

まずはターミナルでClaude Codeを起動し、次のように指示してみましょう。

このNext.jsプロジェクトのディレクトリ構成を確認して、
Vercel向けの最適なvercel.jsonを生成してください。
/api配下のルートはEdge Functionsとして設定してください。

Claude Codeはプロジェクトのファイル構成を自動でスキャンし、以下のような設定ファイルを提案してくれます。

{
  "functions": {
    "app/api/**/*.ts": {
      "runtime": "edge"
    }
  },
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ]
}

※デプロイ: 開発したコードを本番サーバーに公開・適用すること。

環境変数の整理と.env管理を任せる

本番・ステージング・開発の3環境で環境変数が混在してくると管理が煩雑になりがちです。Claude Codeに「現在の.env.localを確認して、Vercelダッシュボードに登録すべき変数の一覧をまとめて」と依頼するだけで、公開してはいけないキーと安全に公開できる変数を分類してリスト化してくれます。

さらに、Next.jsのNEXT_PUBLIC_プレフィックスの付け忘れも指摘してもらえます。

# Claude Codeへの指示例
$ claude "NEXT_PUBLIC_が必要な環境変数と、サーバーサイド専用の変数を
  .env.localから洗い出して、Vercelの環境変数設定画面向けに整理してください"

※環境変数: APIキーやデータベース接続情報など、コードに直接書きたくない値をOSやサーバーに設定する仕組み。

Edge Functionsのパフォーマンスをチューニングする

Edge Functionsは実行環境の制約（Node.js APIの一部が使えないなど）があるため、既存のAPIルートをそのまま移行するとエラーになることがあります。Claude Codeに「このAPIルートをEdge Runtime対応に書き換えて」と依頼すると、非対応のモジュールを検出して代替実装まで提案してくれます。

// Claude Codeが提案するEdge Runtime対応の書き換え例
export const runtime = "edge";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const id = searchParams.get("id");

  const res = await fetch(`https://api.example.com/items/${id}`);
  const data = await res.json();

  return Response.json(data);
}

デプロイ前にClaude Codeへ「Edge RuntimeではfsモジュールやNode.js固有のAPIが使えない点を考慮して、このディレクトリ以下のAPIルートをすべてチェックして」と指示しておくと、本番でのエラーを事前に防げます。設定ファイルの生成から環境変数の整理、Edge Functions対応まで、Claude Codeを相棒にして効率よくデプロイ準備を進めてみてください。

※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。