nextjs-best-practices
ClaudeでNext.jsのベストプラクティスを適用する
開発者はNext.js App Routerのパターンを追うのに苦労し、しばしば古いアプローチを使用してしまいます。このスキルは、Server Components、データフェッチ、ルーティング、パフォーマンス最適化に関する包括的なベストプラクティスを提供します。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "nextjs-best-practices". このコンポーネントをServer ComponentにすべきかClient Componentにすべきか？ユーザープロフィールデータを表示し、テーマを切り替えるボタンがあります。
Résultat attendu:
コンポーネントを分割してください：Server Componentを作成してユーザープロフィールデータをフェッチ・表示し、そのデータをインタラクティブなテーマ切り替えボタン用のClient Componentに渡します。これにより、データフェッチはサーバー側で（効率的に）維持され、インタラクティビティはクライアント側で維持されます。
Utilisation de "nextjs-best-practices". 1時間ごとに変更されるAPIレスポンスをどのようにキャッシュすべきですか？
Résultat attendu:
ISR（Incremental Static Regeneration）をrevalidate: 3600（秒）で使用してください。これによりレスポンスは1時間キャッシュされ、有効期限後の次のリクエストで再生成されます。オンデマンド更新の場合、データソースが更新されたときにrevalidatePathまたはrevalidateTagを使用してください。
Audit de sécurité
SûrSecurity evaluation complete. All static findings are false positives. The skill contains only markdown documentation about Next.js best practices. Code examples (e.g., page.tsx, revalidate: 60) are displayed in markdown code fences, not executed as shell commands. No cryptographic algorithms, network calls, or file operations are present. This is a safe reference guide for Next.js development.
Motifs détectés
Score de qualité
Ce que vous pouvez construire
新規Next.jsプロジェクトのセットアップ
新しいNext.jsプロジェクトを開始する開発者は、最初からベストプラクティスに従いたいと考えています。彼らはこのスキルを使用して、正しいコンポーネントアーキテクチャを理解します。
レガシーコードのリファクタリング
Pages RouterからApp Routerに移行するチームは、クライアントサイドのフェッチをServer Componentsに変換するガイダンスを必要としています。
パフォーマンスレビュー
既存のNext.jsアプリケーションを監査する開発者は、このスキルを使用してアンチパターンと最適化の機会を特定します。
Essayez ces prompts
[コンポーネントの説明]で[機能を説明]するコンポーネントにServer ComponentとClient Componentのどちらを使用すべきですか？トレードオフを説明してください。
Next.jsで[データソース]から[データ型]をフェッチする最良の方法は何ですか？[鮮度要件を説明]必要があります。
[アプリケーションセクションを説明]のルートをどのように整理すべきですか？ルートグループを使用すべきですか？ファイル構造を表示してください。
[コンテンツを説明]を含むNext.jsページの読み込みが遅いです。ベストプラクティスからどのような最適化技術を適用すべきですか？
Bonnes pratiques
- デフォルトでServer Componentsから開始してください - useState、useEffect、イベントハンドラーなどのインタラクティビティが必要な場合のみ'use client'を追加してください
- サーバーサイドキャッシュを活用し、クライアントバンドルサイズを削減するためにServer Componentsでデータをフェッチしてください
- データ読み込み中の良好なUXと適切なエラーハンドリングを提供するためにloading.tsxとerror.tsxファイルを使用してください
Éviter
- すべてのコンポーネントに'use client'を追加する - これはServer Componentsのパフォーマンス利点を無効にし、バンドルサイズを増加させます
- Client ComponentsでuseEffectを使用してデータをフェッチする - これは不必要なクライアントサイドリクエストとローディング状態を作成します
- loading.tsxとerror.tsxをスキップする - ユーザーは適切なUXの代わりに空白画面や生のエラーメッセージを見ることになります