next-upgrade について
既存の Next.js プロジェクトを公式の移行ガイドに沿って最新バージョンへ更新するスキルです。バージョンごとの手順を特定し、codemod の適用、依存関係の更新、テストを支援します。
主な機能
- 01Next.js と関連依存関係のバージョン検出
- 02公式バージョン別アップグレードガイドの確認
- 03メジャーバージョンの段階的な更新計画
- 04手動移行に先立つ codemod の適用
- 05依存関係と TypeScript 型の更新
- 06ビルドと開発サーバーの確認
活用シーン
- 01Next.js のメジャーバージョンをまたぐ更新
- 02API や設定変更に伴う移行手順の確認
- 03ビルドと開発環境での更新結果の検証
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/next-upgradeを入力して読み込まれたか確認します。
詳細
Next.js をアップグレードする
公式の移行ガイドに従って、現在のプロジェクトを最新の Next.js バージョンにアップグレードします。
手順
-
現在のバージョンを確認する：
package.jsonを読み込み、現在の Next.js バージョンと関連する依存関係（React、React DOM など）を特定します。 -
最新のアップグレードガイドを取得する：WebFetch を使って、公式のアップグレードドキュメントを取得します。
-
アップグレードパスを決定する：現在のバージョンに基づいて、適用する移行手順を特定します。メジャーバージョンをまたぐ場合は、段階的にアップグレードしてください（例：13 → 14 → 15）。
-
まず codemod を実行する：Next.js は、破壊的変更を自動化する codemod を提供しています。
npx @next/codemod@latest <transform> <path>よく使われる変換：
next-async-request-api- 非同期 Request API を更新します（v15）next-request-geo-ip- geo/ip プロパティを移行します（v15）next-dynamic-access-named-export- 動的インポートを変換します（v15）
-
依存関係を更新する：Next.js とピア依存関係をまとめてアップグレードします。
npm install next@latest react@latest react-dom@latest -
破壊的変更を確認する：手動での変更が必要かどうか、アップグレードガイドを確認します。
- API の変更（例：v15 の非同期 params）
next.config.jsの設定変更- 削除される非推奨機能
-
TypeScript の型を更新する（該当する場合）：
npm install @types/react@latest @types/react-dom@latest -
アップグレードをテストする：
npm run buildを実行して、ビルドエラーがないか確認しますnpm run devを実行し、主要な機能をテストします
コメント
Markdown 対応