next-upgrade

Name: next-upgrade
Author: connorads

github.com/connorads開発1866 回インストール今日更新

リポジトリ

next-upgrade について

公式の移行ガイドに沿って既存の Next.js プロジェクトを更新するスキルです。codemod、依存関係の更新、ビルド確認を行い、新しい Next.js バージョンへの移行を支援します。

主な機能

01Next.js と関連依存関係の現行版を確認
02バージョンに応じた移行手順を選択
03破壊的変更に codemod を適用
04Next.js と関連依存関係を更新
05ビルドと主要機能を確認

活用シーン

01複数メジャーバージョンを段階的に更新
02手動移行前に自動変換を適用
03依存関係更新後にプロジェクトを確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/connorads/dotfiles --skill next-upgrade

インストール後、Claude Code で/next-upgradeを入力して読み込まれたか確認します。

詳細

Next.js をアップグレードする

公式の移行ガイドに従って、現在のプロジェクトを最新の Next.js バージョンにアップグレードします。

手順

現在のバージョンを確認する：package.json を読み込み、現在の Next.js バージョンと関連する依存関係（React、React DOM など）を特定します。
最新のアップグレードガイドを取得する：WebFetch を使って、公式のアップグレードドキュメントを取得します。
- Codemods：https://nextjs.org/docs/app/guides/upgrading/codemods
- バージョン別ガイド（必要に応じてバージョンを調整してください）：
アップグレードパスを決定する：現在のバージョンに基づいて、適用する移行手順を特定します。メジャーバージョンをまたぐ場合は、段階的にアップグレードしてください（例：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 対応

ログインしてコメント

基本情報

作者: connorads
リポジトリ: connorads/dotfiles
カテゴリ: 開発
インストール数: 66
GitHub スター: 18

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.2M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

870.5k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。