next-upgrade について
既存プロジェクトを公式の移行ガイドに沿って最新の Next.js にアップグレードするためのスキルです。バージョン確認、移行経路の判断、codemod、依存関係の更新、ビルドテストを案内します。
主な機能
- 01Next.js と関連依存関係のバージョン確認
- 02適用する公式アップグレードガイドの特定
- 03段階的なバージョン移行の計画
- 04codemod の先行実行
- 05依存関係と TypeScript 型の更新
- 06ビルドとアプリ動作のテスト
活用シーン
- 01プロジェクトに必要な移行手順の特定
- 02破壊的変更の変換の自動化
- 03Next.js と React 依存関係の同時更新
- 04アップグレード後のビルドと主要機能の確認
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応