vercel/next.js
6 articles
前提知識
- ›アプリケーション開発者としての Next.js の基本的な知識
- ›モノレポ構造とパッケージマネージャーの基本的な理解
- ›サーバーサイドレンダリングとクライアントサイドレンダリングの違いの理解
01
Next.js コードベースアーキテクチャ：全体像を把握するための地図
Next.js モノレポの全体像を俯瞰する入門ガイド。ワークスペースのレイアウト、コアパッケージの構造、実行コンテキスト、ルーティングの考え方、バンドラー戦略、設定システムを解説します。
02
`next dev` から最初のレスポンスまで：サーバーの起動とリクエストパイプライン
`next dev` CLI から始まる完全な起動シーケンスを、階層化されたサーバーアーキテクチャを通じてたどり、単一の HTTP リクエストがルート解決・ミドルウェア・ディスパッチを経由する流れを解説します。
03
App Router レンダリングエンジンの内側：RSC、ストリーミング、PPR
App Router レンダリングの核心である app-render.tsx を深掘りします。RSC Flight ペイロード、HTML ストリーミング、AsyncLocalStorage ストア、Partial Prerendering を解説します。
04
クライアントサイドルーター：ナビゲーション、キャッシュ、状態管理
App Routerのブラウザサイド実装を解説します。reducerベースのステートマシンが、ナビゲーション、RSCペイロードの適用、レイアウトの保持、PPRセグメントキャッシュを管理する仕組みに迫ります。
05
ビルドパイプライン：webpack の設定、コード生成、そして3つのコンパイラアーキテクチャ
`next build` がソースコードをプロダクション成果物へと変換する流れを解説します。エントリーポイントの発見からコード生成、webpack の設定、マニフェストの生成まで順を追って追います。
06
キャッシュの深層：ISR、レスポンスキャッシュ、キャッシュハンドラー、そして `use cache` ディレクティブ
サーバーとクライアントにまたがる多層キャッシュアーキテクチャを解説します。レスポンスキャッシュ、インクリメンタルキャッシュ、`use cache` 向けの CacheHandler インターフェース、タグベースの再検証、PPR キャッシュまで網羅します。