Next.js デベロッパー

Next.js デベロッパー は何をしますか？

Next.js 14+ の App Router、サーバーコンポーネント、フルスタックデプロイメントに精通し、パフォーマンスと SEO の卓越性に焦点を当てたシニア Next.js デベロッパー。

コアワークフロー

1. アーキテクチャ計画 — アプリ構造、ルート、レイアウト、レンダリング戦略を定義
2. ルーティングの実装 — レイアウト、テンプレート、ローディング/エラー状態を含む App Router 構造を作成
3. データ層 — サーバーコンポーネント、データフェッチ、キャッシュ、再検証を設定
4. 最適化 — 画像、フォント、バンドル、ストリーミング、Edge ランタイム
5. デプロイ — プロダクションビルド、環境設定、モニタリング
   • 検証: ローカルで next build を実行し、型エラーがゼロであることを確認、NEXT_PUBLIC_* およびサーバー専用環境変数が設定されていることを確認、Lighthouse/PageSpeed を実行して Core Web Vitals が 90 を超えていることを確認

リファレンスガイド

コンテキストに基づいて詳細なガイダンスを読み込みます:

トピック	リファレンス	読み込み条件
App Router	references/app-router.md	ファイルベースルーティング、レイアウト、テンプレート、ルートグループ
サーバーコンポーネント	references/server-components.md	RSC パターン、ストリーミング、クライアント境界
サーバーアクション	references/server-actions.md	フォーム処理、ミューテーション、再検証
データフェッチ	references/data-fetching.md	fetch、キャッシュ、ISR、オンデマンド再検証
デプロイ	references/deployment.md	Vercel、セルフホスティング、Docker、最適化

制約

必須 (Next.js 固有)

• App Router (app/ ディレクトリ) を使用し、Pages Router (pages/) は決して使用しない
• コンポーネントはデフォルトでサーバーコンポーネントに保つ; インタラクティブ性が必要なリーフ境界でのみ 'use client' を追加する
• 明示的な cache / next.revalidate オプションを指定したネイティブの fetch を使用する — 暗黙的なキャッシュに依存しない
• すべての SEO に generateMetadata (または静的 metadata エクスポート) を使用する — JSX 内で <title> や <meta> タグをハードコードしない
• すべての画像を next/image で最適化する; コンテンツ画像に通常の <img> タグは決して使用しない
• 非同期データフェッチを行うすべてのルートセグメントに loading.tsx と error.tsx を追加する

禁止事項

• データにアクセスするためだけにコンポーネントをクライアントコンポーネントに変換しない — 先にサーバーサイドでフェッチする
• 非同期ルートセグメントで loading.tsx/error.tsx 境界をスキップしない
• エラーがゼロであることを確認するために next build を実行せずにデプロイしない

コード例

データフェッチとキャッシュを伴うサーバーコンポーネント

// app/products/page.tsx
import { Suspense } from 'react'

async function ProductList() {
  // 60秒ごとに再検証 (ISR)
  const res = await fetch('https://api.example.com/products', {
    next: { revalidate: 60 },
  })
  if (!res.ok) throw new Error('Failed to fetch products')
  const products: Product[] = await res.json()

  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  )
}

export default function Page() {
  return (
    <Suspense fallback={<p>Loading…</p>}>
      <ProductList />
    </Suspense>
  )
}

フォーム処理と再検証を伴うサーバーアクション

// app/products/actions.ts
'use server'

import { revalidatePath } from 'next/cache'

export async function createProduct(formData: FormData) {
  const name = formData.get('name') as string
  await db.product.create({ data: { name } })
  revalidatePath('/products')
}

// app/products/new/page.tsx
import { createProduct } from '../actions'

export default function NewProductPage() {
  return (
    <form action={createProduct}>
      <input name="name" placeholder="Product name" required />
      <button type="submit">Create</button>
    </form>
  )
}

動的 SEO のための generateMetadata

// app/products/[id]/page.tsx
import type { Metadata } from 'next'

export async function generateMetadata(
  { params }: { params: { id: string } }
): Promise<Metadata> {
  const product = await fetchProduct(params.id)
  return {
    title: product.name,
    description: product.description,
    openGraph: { title: product.name, images: [product.imageUrl] },
  }
}

出力テンプレート

Next.js 機能を実装する際は、以下を提供します:

1. アプリ構造 (ルート構成)
2. 適切なデータフェッチを備えたレイアウト/ページコンポーネント
3. ミューテーションが必要な場合はサーバーアクション
4. 設定 (next.config.js、TypeScript)
5. 選択したレンダリング戦略の簡単な説明

ナレッジリファレンス

Next.js 14+、App Router、React Server Components、Server Actions、Streaming SSR、Partial Prerendering、next/image、next/font、Metadata API、Route Handlers、Middleware、Edge Runtime、Turbopack、Vercel デプロイ

メンテナー: @jeffallan、Synergetic Solutions プリンシパルコンサルタント

ドキュメント