mcpField
N
nextjs-performance

nextjs-performance

github.com/srbhr開発28.9k63 回インストール1 週間前に更新
リポジトリ

nextjs-performance について

Next.js プロジェクトのパフォーマンス開発スキルで、データ取得、バンドルサイズ、Server Actions、本番ビルドの実践方法をまとめています。フロントエンドを最適化し、変更前に重要な実装パターンを確認する開発者向けです。

主な機能

  1. 01Promise.all による独立したデータ取得の並列化
  2. 02Suspense と await の遅延による低速リクエストの処理
  3. 03barrel import の回避と重いコンポーネントの動的読み込み
  4. 04Server Actions 内での認証と所有権確認
  5. 05本番ビルドと PR 前チェックリスト

活用シーン

  1. 01独立したページデータ取得の逐次待ちを削減
  2. 02Next.js フロントエンドのバンドルサイズ管理
  3. 03Server Actions の認証・所有権チェックの確認

インストール

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

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

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

詳細

Next.js のパフォーマンス

コードを書く前に

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

重要なルール

ウォーターフォール
  • 独立したフェッチには Promise.all() を使用します
  • 遅いデータは <Suspense> 境界でラップします
  • 必要に応じて、分岐の中に await を遅らせます
// WRONG
const resumes = await fetchResumes();
const jobs = await fetchJobs();

// RIGHT
const [resumes, jobs] = await Promise.all([fetchResumes(), fetchJobs()]);
バンドルサイズ
  • バレルインポートは禁止：import X from 'lucide-react' は誤りです
  • 直接インポートを使用：import X from 'lucide-react/dist/esm/icons/x'
  • 重いコンポーネント（エディター、グラフ、PDF）には next/dynamic を使用します
  • ssr: false で分析機能の読み込みを遅らせます
import dynamic from 'next/dynamic';
const HeavyEditor = dynamic(() => import('./HeavyEditor'), { ssr: false });
Server Actions
  • 認証はミドルウェアだけでなく、アクションの内部で必ず確認します
  • ミューテーションの前に、リソースの所有権を確認します
本番ビルド
  • npm run dev ではなく、npm run build && npm run start を実行します
  • Docker では standalone 出力を使用する必要があります

PR 前のチェックリスト

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

コメント

Markdown 対応