next-upgrade について
next-upgradeは、公式の移行ガイドに沿って既存のNext.jsプロジェクトを最新バージョンへ更新するスキルです。適用する変更の特定から依存関係の更新、テストまでを支援します。
主な機能
- 01Next.jsと関連依存関係のバージョン検出
- 02バージョンに応じた移行手順の選定
- 03破壊的変更に対応するCodemodの実行
- 04依存関係とTypeScript型の更新
- 05ビルドと開発アプリの確認
活用シーン
- 01複数のメジャーバージョンをまたぐ更新計画
- 02対応APIの移行の自動化
- 03設定やAPIの破壊的変更の確認
- 04更新後のNext.jsプロジェクトのテスト
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応