next-best-practices

概要

next-best-practicesとは？

next-best-practicesは、Next.jsを使うフロントエンド開発者向けの包括的なスキルです。拡張性と保守性に優れたNext.jsアプリケーション構築のための実践的なベストプラクティスやパターンを提供します。ファイル規約やReact Server Component（RSC）の境界、非同期データ取得、エラー処理、最適化まで幅広くカバーし、よくある落とし穴を避けつつ最新のNext.jsワークフローを導入するのに役立ちます。

どんな人におすすめ？

• Next.jsとReactを使うフロントエンド開発者
• Next.jsのApp Routerへ移行中のチーム
• 最新のNext.js規約を学びたい、または徹底したい方

どんな課題を解決する？

• 大規模Next.jsプロジェクトのファイル・フォルダ構成の明確化
• Server ComponentとClient Componentの正しい使い分け
• Next.js 15以降の非同期データパターンと移行方法の解説
• バンドルやランタイムのよくあるエラーの予防
• 強力なエラー処理とデバッグ戦略の提供

どんなタイミングで使うと良い？

• 新規Next.jsプロジェクトの立ち上げや既存プロジェクトのリファクタリング時
• 新メンバーのNext.js規約のオンボーディング時
• データ取得、ルーティング、バンドルのトラブルシューティング時

使い方

インストール手順

1. 以下のコマンドでスキルをプロジェクトに追加します：

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

2. SKILL.mdファイルを開き、概要と詳細ガイドへのリンクを確認します。
3. 以下の補助ファイルで各トピックを深掘りします：
   • file-conventions.md：プロジェクト構成、ルートセグメント、特殊ファイルについて学べます。
   • rsc-boundaries.md：React Server Componentの有効・無効パターンを理解します。
   • async-patterns.md：params、cookies、headersの新しい非同期APIへの移行方法を解説。
   • data-patterns.md：適切なデータ取得・更新戦略の選択方法。
   • error-handling.md：エラーバウンダリの実装やナビゲーション例外の処理。
   • bundling.md：サードパーティパッケージのバンドル問題の解決策。
   • directives.md：'use client'、'use server'、'use cache'などReact・Next.jsのディレクティブの使い方。
   • debug-tricks.md：Next.jsの開発ツールやエンドポイントでデバッグを高速化。

プロジェクトへの適用

• 提供されているパターンを参考にしつつ、自身のリポジトリやツール、デプロイ環境に合わせて調整してください。
• コードをそのままコピーせず、各パターンが自分のスタックやNext.jsのバージョンに適合するか必ず確認しましょう。

主なトピック

• ファイル規約とプロジェクト構成
• RSCの境界とコンポーネントパターン
• 非同期データ取得と移行
• ルートハンドラとランタイム選択
• エラーバウンダリとグローバルエラー処理
• 画像・フォントの最適化
• バンドルと依存関係の外部化
• デバッグと開発ツール

よくある質問

next-best-practicesの内容はどうやって確認できますか？

インストール後、Filesタブを開くとSKILL.mdやasync-patterns.md、bundling.mdなどのガイドが一覧できます。各ファイルは特定のNext.jsベストプラクティスに焦点を当てています。

next-best-practicesは特定のNext.jsバージョン向けですか？

このスキルはNext.js 15以降に対応しており、新しい非同期APIや規約への移行手順も含みます。古いバージョンには一部パターンが適用されない場合があります。

カスタムセットアップでも使えますか？

はい。ただし、ルーティングやサーバーランタイム、バンドル周りのカスタム設定との互換性を考慮して、各パターンをよく確認してください。

特定のトピックについてもっと詳しく知りたい場合は？

各トピックファイルには実践的な例や、公式Next.jsやReactのドキュメントへの参照リンクが含まれています。

問題が発生した場合はどこで助けを得られますか？

debug-tricks.mdに高度なデバッグのヒントがあり、スキル内のファイルにリンクされた公式Next.jsドキュメントも参照してください。