vercel-react-best-practicesスキルでReact/Next.jsのパフォーマンスを最適化する方法
React/Next.jsアプリケーションのパフォーマンス改善に取り組むとき、どこから手をつけるべきか迷うことはありませんか？最適化のポイントは多岐にわたり、優先順位の判断が難しい場面があります。
この記事では、Vercel Engineeringが策定した45のルールを8カテゴリに分類したvercel-react-best-practicesスキルの使い方を解説します。
このスキルは何をしてくれるのか
vercel-react-best-practicesは、React/Next.jsコードを書く・レビューする・リファクタリングする際にパフォーマンスのベストプラクティスを適用するスキルです：
- 8カテゴリ・45ルールのパフォーマンス最適化ガイドライン提供
- 影響度順の優先順位付け（CRITICAL → HIGH → MEDIUM → LOW）
- コード生成時に自動的にベストプラクティスを適用
- 既存コードのリファクタリング支援
React/Next.jsアプリのパフォーマンス改善に取り組む開発者や、チームのコード品質を向上させたい技術リーダーに向いています。
インストール方法
前提条件
- Claude Codeがインストール済みであること
- React/Next.jsプロジェクトが対象
インストールコマンド
claude mcp add github.com/langgenius/dify/tree/main/.claude/skills/vercel-react-best-practices
使い方
基本的な使い方
React/Next.jsのコードを書いたりレビューする際に、スキルが自動的にトリガーされます：
このReactコンポーネントのパフォーマンスを改善して
ルールカテゴリの優先順位
| 優先度 | カテゴリ | 影響度 |
|---|---|---|
| 1 | ウォーターフォール排除 | CRITICAL |
| 2 | バンドルサイズ最適化 | CRITICAL |
| 3 | サーバーサイドパフォーマンス | HIGH |
| 4 | クライアントサイドデータ取得 | MEDIUM-HIGH |
| 5 | 再レンダリング最適化 | MEDIUM |
代表的なルール例
ウォーターフォール排除では、独立した非同期処理をPromise.all()で並列化するルールasync-parallelがあります。
バンドルサイズ最適化では、barrel fileからの直接インポート（bundle-barrel-imports）や、next/dynamicによる動的インポート（bundle-dynamic-imports）が含まれます。
知っておくべき注意点
優先順位に従って適用する
すべてのルールを一度に適用する必要はありません。CRITICAL（ウォーターフォール排除、バンドルサイズ）から取り組むことで、効果の高い改善を先に実現できます。
プロジェクトの状況に応じて判断する
45のルールすべてがどのプロジェクトにも適用できるわけではありません。たとえばrendering-activity（Activity APIの使用）はReactの実験的機能に依存します。プロジェクトの技術スタックに合わせて適用してください。
個別ルールの詳細は別ファイル
各ルールの詳細な説明とコード例は、rules/ディレクトリ内の個別ファイルに記載されています。スキルが必要に応じて参照します。
まとめ
vercel-react-best-practicesスキルを使うと、Vercel Engineeringの知見に基づいたパフォーマンス最適化を、コーディング中に自動で適用できます。45ルールの優先順位付けにより、効果の高い改善から順に取り組めます。
詳細な仕様やルール一覧は、スキル詳細ページをご確認ください。