← Deep Dive Technology

Next.js Deep Dive

Pages RouterからApp Router、Server ComponentsからCache Componentsまで、Reactフルスタックフレームワークの全貌を10章で徹底解剖するシリーズ

#Next.js#React#フロントエンド#フルスタック#Vercel

目次

  1. 第1章
    第1章: Next.jsとは何か — 誕生の背景と設計哲学 Guillermo Rauchのビジョン、ZEITでの開発経緯、6つの設計原則、Reactとの関係性
    →
  2. 第2章
    第2章: Next.jsの歴史 — Pages RouterからApp Routerへの10年 v1〜v16の主要バージョン年表、Pages Router時代の成熟、App Router導入の衝撃
    →
  3. 第3章
    第3章: App Routerのアーキテクチャ — ルーティングとレイアウトシステム ファイルシステムベースルーティング、Dynamic/Parallel/Intercepting Routes、レイアウト階層
    →
  4. 第4章
    第4章: Server ComponentsとClient Components — レンダリングモデルの革新 RSCの仕組み、use client境界の設計、コンポジションパターン、バンドルサイズ削減
    →
  5. 第5章
    第5章: データフェッチとキャッシュ戦略 — use cacheからISRまで Server Componentsでの直接fetch、Cache Components、キャッシュキー生成、再検証戦略
    →
  6. 第6章
    第6章: レンダリング戦略の使い分け — SSR, SSG, Streaming, PPR 各レンダリング戦略の仕組みと適材適所、Suspenseストリーミング、Partial Prerendering
    →
  7. 第7章
    第7章: パフォーマンス最適化 — Core Web VitalsとReact Compiler LCP/INP/CLS最適化、next/image・next/font、バンドル分析、React Compiler自動メモ化
    →
  8. 第8章
    第8章: エコシステムと開発ツール — Turbopack, Turborepo, AI SDK Turbopackアーキテクチャ、モノレポ管理、状態管理・ORM・認証の推奨スタック
    →
  9. 第9章
    第9章: セキュリティと本番運用 — 多層防御からセルフホスティングまで Server Actionsセキュリティ、React2Shell脆弱性、CSP、Deployment Adapters API
    →
  10. 第10章
    第10章: 類似技術比較と将来展望 — Next.jsの現在地と未来 Remix/SvelteKit/Astro比較、採用動向と満足度、React Foundation、ロードマップ
    →