mcpField
N
nextjs15-performance

nextjs15-performance

github.com/srbhr開発28.9k223 回インストール6 日前に更新
リポジトリ

nextjs15-performance について

nextjs15-performance は、Next.js の開発におけるパフォーマンスとセキュリティのルールを示すコーディングスキルです。データ取得、バンドルサイズ、Server Actions、本番ビルドを扱います。

主な機能

  1. 01独立したデータ取得の並列化
  2. 02直接インポートによるバンドル縮小
  3. 03大型コンポーネントの動的読み込み
  4. 04Server Actions 内での認可確認
  5. 05本番ビルド設定の使用

活用シーン

  1. 01Next.js のデータ取得パターンをレビュー
  2. 02不要なクライアントバンドルコードを回避
  3. 03所有権確認による変更アクションの保護

インストール

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

$npx skills add https://github.com/srbhr/resume-matcher --skill nextjs15-performance

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

詳細

Next.js のコードを書く前に

  1. パターン全体を確認するため、docs/agent/architecture/nextjs-critical-fixes.md を読みます
  2. 例として、apps/frontend/components/ にある既存のコンポーネントを確認します

重要なルール（常に適用）

ウォーターフォール
  • 独立したフェッチには Promise.all() を使用します
  • 時間のかかるデータは <Suspense> 境界でラップします
  • 必要に応じて、await を分岐の中に遅延します
バンドルサイズ
  • バレルインポートは禁止：import X from 'lucide-react' ❌
  • 直接インポートを使用：import X from 'lucide-react/dist/esm/icons/x' ✅
  • 大きなコンポーネント（エディター、チャート、PDF ビューアー）には next/dynamic を使用します
  • アナリティクスは ssr: false で遅延します
サーバーアクション
  • 認証はミドルウェアだけでなく、必ずアクション内で確認します
  • 変更を加える前に、リソースの所有権を検証します
本番ビルド
  • ユーザーが実行するのは npm run dev ではなく、npm run build && npm run start です
  • Docker では開発モードではなく、スタンドアロン出力を使用する必要があります

PR 前のクイックチェック

[ ] No sequential awaits for independent data
[ ] Icons imported directly
[ ] Heavy components use next/dynamic
[ ] Server Actions have auth inside
[ ] Suspense around slow fetches

コメント

Markdown 対応