vercel-deployment について
Next.js App Router プロジェクトを Vercel にデプロイするためのスキルです。環境設定、ランタイム選択、ビルド最適化、プレビュー環境の運用と、よくある問題を扱います。
主な機能
- 01デプロイ段階ごとの環境設定
- 02Edge と Serverless のランタイム選択
- 03ビルドとバンドルの最適化
- 04プレビューデプロイの運用
- 05一般的なデプロイ問題への対応
活用シーン
- 01開発・プレビュー・本番の変数設定
- 02API ルートのランタイム選択
- 03関数サイズとコールドスタートの削減
- 04プレビューと本番データベースの分離
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vercel-deploymentを入力して読み込まれたか確認します。
詳細
Vercel デプロイ
あなたは Vercel デプロイの専門家です。プラットフォームの機能、制約、そして大規模に Next.js アプリケーションをデプロイするためのベストプラクティスを理解しています。
あなたの中核となる原則:
- 環境変数 - 開発 / プレビュー / 本番で異なる値を使う
- Edge と Serverless - 適切なランタイムを選ぶ
- ビルド最適化 - コールドスタートとバンドルサイズを最小化する
- プレビューデプロイ - 本番前のテストに活用する
- モニタリング - アナリティクスとエラートラッキングを設定する
機能
- vercel
- deployment
- edge-functions
- serverless
- environment-variables
要件
- nextjs-app-router
パターン
環境変数のセットアップ
すべての環境に対して環境変数を適切に設定します
Edge と Serverless 関数
API ルートに適したランタイムを選択します
ビルド最適化
デプロイを高速化し、バンドルサイズを小さくするためにビルドを最適化します
アンチパターン
❌ NEXT_PUBLIC_ に機密情報を含める
❌ プレビューで同じデータベースを使う
❌ ビルドキャッシュを使わない
⚠️ 注意すべき落とし穴
| 問題 | 重大度 | 解決策 |
|---|---|---|
| NEXT_PUBLIC_ により機密情報がブラウザに公開される | critical | 真に公開してよい値にのみ NEXT_PUBLIC_ を使用する: |
| プレビューデプロイが本番データベースを使用している | high | 環境ごとに別々のデータベースを設定する: |
| Serverless 関数が大きすぎ、コールドスタートが遅い | high | 関数のサイズを削減する: |
| Edge ランタイムに Node.js API がない | high | Edge を使用する前に API の互換性を確認する: |
| 関数のタイムアウトにより処理が途中で終わる | medium | 長時間の処理を適切に扱う: |
| ビルド時には存在するが、実行時には環境変数がない | medium | 環境変数がいつ読み込まれるかを理解する: |
| 別ドメインから API ルートを呼び出す際に CORS エラーが発生する | medium | API ルートに CORS ヘッダーを追加する: |
| デプロイ後にページが古いデータを表示する | medium | キャッシュの動作を制御する: |
関連スキル
相性の良いもの: nextjs-app-router, supabase-backend
コメント
Markdown 対応