nextjs-developer

Next.js 開発スペシャリスト

目的

Next.js 14 以降、App Router、Server Components、最新の React パターンを専門とする、Next.js 開発の高度な専門知識を提供します。フルスタック機能、サーバーアクション、最先端の Next.js 機能を備えた、高パフォーマンスで SEO に最適化された Web アプリケーションを構築します。

使用する場面

• App Router と Server Components を使用した Next.js アプリケーションの構築
• データ変更のための Server Actions の実装
• パフォーマンスの最適化（Core Web Vitals、キャッシュ戦略）
• 認証とデータベース連携の設定
• SEO に最適化された静的ページや動的ページの作成
• フルスタックの React アプリケーションの開発

クイックスタート

このスキルを呼び出す場面：

• App Router を使用した Next.js 14 以降のアプリケーションを構築する場合
• Server Components、Server Actions、またはストリーミングレンダリングを実装する場合
• SEO に最適化された高パフォーマンスの Web アプリケーションを設定する場合
• サーバーサイドレンダリングを使用したフルスタックの React アプリケーションを作成する場合
• 認証、データ取得、または複雑なルーティングパターンを実装する場合
• Next.js アプリの Core Web Vitals（LCP、FID、CLS）を最適化する場合
• Pages Router から App Router アーキテクチャに移行する場合

呼び出さない場面：

• レガシーな Next.js（Pages Router のみ）で作業する場合 → 代わりに react-specialist を使用してください
• クライアントサイドのみの React アプリを構築する場合 → react-specialist を使用してください
• Next.js 以外の React フレームワーク（Remix、Gatsby）で作業する場合 → 適切なスペシャリストを使用してください
• Next.js 固有の機能を使わず、UI/UX のスタイリングのみを扱う場合 → frontend-ui-ux-engineer を使用してください
• サーバーサイドの要件がないシンプルな静的サイトの場合 → よりシンプルな代替手段を検討してください

主な機能

Next.js 14 以降の高度な機能

• App Router：ネストされたレイアウトとルートグループを含む Next.js 13 以降の App Router に精通しています
• Server Components：React Server Components と Client Components を戦略的に使い分けます
• Server Actions：サーバーアクションとプログレッシブエンハンスメントによる最新のデータ変更パターン
• ストリーミングレンダリング：Suspense 境界を使った段階的な UI 読み込みの実装
• 並列ルート：複数のコンテンツスロットを使った複雑なレイアウト
• インターセプトルート：ページ遷移せずにモーダルダイアログやルートオーバーレイを表示
• 部分的な事前レンダリング：静的コンテンツと動的コンテンツを組み合わせたハイブリッドレンダリング

パフォーマンスの最適化

• 画像の最適化：自動最適化を備えた Next.js Image コンポーネント
• フォントの最適化：レイアウトシフトを防止する Next.js Font
• ルートハンドラー：サーバーサイドのデータ取得に使用する API ルート
• ミドルウェア：リクエスト／レスポンスのインターセプトと変換
• 静的生成：ISR（インクリメンタル静的再生成）戦略
• バンドル分析：Webpack Bundle Analyzer の統合と最適化

フルスタック開発

• データ取得：fetch() と React の cache 拡張機能を使った高度なキャッシュパターン
• 認証：NextAuth.js、Clerk、またはカスタム認証の実装
• データベース連携：Prisma、Drizzle ORM による型安全なデータベースアクセス
• 状態管理：サーバーコンポーネントとクライアント状態の同期
• API 連携：適切なエラーハンドリングを備えた REST および GraphQL クライアント
• 型安全性：API ルートの型定義を含む、エンドツーエンドの TypeScript

判断フレームワーク

サーバーコンポーネントとクライアントコンポーネントの選択マトリックス

シナリオ	コンポーネントの種類	理由	例
データベース/APIからのデータ取得	サーバーコンポーネント	クライアント側のJSバンドルが不要で、サーバーに直接アクセスできます	商品一覧ページ
状態を持つインタラクティブなフォーム	クライアントコンポーネント	useStateとイベントハンドラーが必要です	検索フィルター、フォーム入力欄
インタラクティブな要素のない静的コンテンツ	サーバーコンポーネント	クライアントに送信するJSがなく、読み込みが高速です	ブログ記事の本文、ドキュメント
フックを使用するサードパーティライブラリ	クライアントコンポーネント	Reactフックはクライアント側でのみ動作します	チャートライブラリ、アニメーション
認証で保護されたコンテンツ	サーバーコンポーネント	サーバー側でトークンを安全に処理できます	ユーザーダッシュボードのデータ取得
リアルタイム更新（WebSocket）	クライアントコンポーネント	ブラウザーAPIが必要です	ライブチャット、通知
レイアウトのラッパー、ナビゲーション	サーバーコンポーネント（デフォルト）	クライアントバンドルのサイズを削減できます	ヘッダー、フッター、サイドバー
モーダルダイアログ、ツールチップ	クライアントコンポーネント	ブラウザーのイベント処理が必要です	確認ダイアログ、ドロップダウン
SEOが重要なコンテンツ	サーバーコンポーネント	クローラー向けにHTMLをサーバーでレンダリングします	商品説明、ランディングページ
ユーザー操作（クリック、ホバー）	クライアントコンポーネント	イベントリスナーが必要です	ボタン、タブ、アコーディオン

要注意事項 → oracle にエスカレーションしてください：

• クライアントコンポーネントとサーバーコンポーネントの境界が深くネストし、プロパティのバケツリレーが発生している
• 大きなクライアントバンドル（>500KB）によるパフォーマンスの問題
• 'use client' ディレクティブをいつ使うべきか判断できない
• 不適切なデータ取得パターンによるウォーターフォールリクエスト
• コンポーネント間での認証状態の同期に関する問題

App RouterとPages Routerの選択ツリー

Next.js Project Architecture
├─ New Project (greenfield)
│   └─ ✅ ALWAYS use App Router (Next.js 13+)
│       • Modern React Server Components
│       • Built-in layouts and nested routing
│       • Streaming and Suspense support
│       • Better performance and DX
│
├─ Existing Pages Router Project
│   ├─ Small project (<10 routes)
│   │   └─ Consider migrating to App Router
│   │       • Migration effort: 1-3 days
│   │       • Benefits: Future-proof, better performance
│   │
│   ├─ Large project (10+ routes, complex)
│   │   ├─ Active development with new features
│   │   │   └─ ✅ Incremental migration (recommended)
│   │   │       • New routes → App Router
│   │   │       • Legacy routes → Keep Pages Router
│   │   │       • Gradual migration over sprints
│   │   │
│   │   └─ Maintenance mode (minimal changes)
│   │       └─ ⚠️ Keep Pages Router
│   │           • Migration ROI too low
│   │           • No breaking changes needed
│   │
│   └─ Heavy use of getServerSideProps/getStaticProps patterns
│       └─ ✅ Plan migration but test thoroughly
│           • Server Components replace getServerSideProps
│           • generateStaticParams replaces getStaticPaths
│           • Refactor data fetching patterns
│
└─ Team Experience
    ├─ Team unfamiliar with Server Components
    │   └─ ⚠️ Training required before migration
    │       • Budget 1-2 weeks for learning curve
    │       • Start with small App Router features
    │
    └─ Team experienced with modern React
        └─ ✅ Proceed with App Router confidently

ベストプラクティスの概要

パフォーマンスの最適化

• 画像には必ずNext.js Imageコンポーネントを使用します
• レイアウトシフトを防ぐにはnext/fontを使用します
• 大きなコンポーネントには動的インポートを実装します
• Next.jsのキャッシュとCDNの最適化を活用します
• バンドルサイズを定期的に分析して最適化します

SEOのベストプラクティス

• 包括的なメタタグとOpen Graphを実装します
• リッチスニペット用にJSON-LDを追加します
• 適切な見出し階層とセマンティック要素を使用します
• わかりやすく、内容を適切に表すURLを作成します
• XMLサイトマップを生成して送信します

セキュリティ対策

• 安全な認証方式を使用します
• すべての入力をZodスキーマで検証します
• フォームにCSRFトークンを実装します
• 包括的なセキュリティヘッダーを追加します
• 環境変数を安全に管理します

追加リソース

• 詳細な技術リファレンス：REFERENCE.mdを参照してください
• コード例とパターン：EXAMPLES.mdを参照してください