next-upgrade

概要

next-upgradeとは？

next-upgradeは、フロントエンド開発者がNext.jsプロジェクトを最新バージョンにスムーズにアップグレードできるよう設計された専用スキルです。公式のマイグレーションガイドとcodemodを自動で適用することで、手作業の負担を軽減し、メジャーバージョン移行時のエラーを最小限に抑えます。

誰がnext-upgradeを使うべき？

このスキルは、Next.jsとReactを使った本番アプリケーションを維持管理している開発者に最適です。最新機能やセキュリティパッチ、パフォーマンス改善を取り入れたい方、複雑なコードベースを管理するチームやフレームワークのアップグレードにベストプラクティスを適用したい場合に特に役立ちます。

next-upgradeが解決する課題

• 現在のNext.jsバージョンと依存関係を自動検出
• 最新の公式マイグレーションガイドを取得・適用
• 推奨されるcodemodを実行し破壊的変更に対応
• メジャーバージョンの大幅アップグレードを段階的に案内
• ReactやReact DOMなどのピア依存関係も同時に更新

使い方

インストール手順

1. エージェントにスキルを追加:

   npx skills add https://github.com/vercel-labs/next-skills --skill next-upgrade
   

2. プロジェクトの準備:
   • Next.jsを使用しており、package.jsonが存在することを確認
   • アップグレード開始前にコードをコミットまたはバックアップ

next-upgradeの実行

1. スキルのドキュメントを確認:
   • 詳細な概要や引数のヒントはSKILL.mdを参照
2. 現在のバージョンを検出:
   • package.jsonを読み込み、Next.jsや関連依存のバージョンを特定
3. マイグレーションガイドの取得と確認:
   • next-upgradeがnextjs.orgから最新の公式アップグレードドキュメント（codemodやバージョン別ガイド含む）を取得
4. codemodの適用:
   • 推奨されるcodemodを使用してアップグレードを実行。例：

     npx @next/codemod@latest <transform> <path>
     

   • よく使われるtransformにはnext-async-request-api、next-request-geo-ip、next-dynamic-access-named-exportなどがある
5. 依存関係の更新:
   • Next.jsとピア依存関係をまとめてアップグレード:

     npm install next@latest react@latest react-dom@latest
     

6. 確認とテスト:
   • マイグレーションガイドに従い手動の作業や破壊的変更を確認
   • 各アップグレードステップ後にアプリケーションを十分にテスト

推奨確認ファイル

• SKILL.md – メインの使用ガイド
• README.md、AGENTS.md、metadata.json – 追加のコンテキストや設定情報

よくある質問

next-upgradeは何を自動化しますか？

next-upgradeはバージョン検出、公式マイグレーションガイドの取得、codemodの実行を自動化し、Next.jsのアップグレードを効率化します。ただし、開発者によるレビューとテストは必要です。

どのNext.jsバージョンでもnext-upgradeを使えますか？

はい。next-upgradeは古いバージョンからの段階的アップグレードを公式ガイドに沿ってサポートします。大きなバージョンジャンプの場合は、メジャーバージョンごとに順にアップグレードすることを推奨します。

ReactやReact DOMも更新されますか？

はい。Next.jsとの互換性を保つため、ReactやReact DOMなどのピア依存関係も同時に更新されます。

詳細情報やトラブルシューティングはどこで確認できますか？

Filesタブでファイルツリー全体を確認でき、ネストされた参照や補助スクリプトも含まれます。最新の公式Next.jsマイグレーションドキュメントも必ず参照してください。