Next.js 13+ の App Router を中心に、ルーティング・レンダリング・データ取得・Server Actionsなど9つの概念をコード例付きで解説します。
App RouterではデフォルトがServer Components。"use client"ディレクティブを追加するとClient Componentになる。
App Routerで特定の意味を持つ予約済みファイル名。これらのファイルを配置することで自動的に特定の機能が有効になる。
[slug] のような動的セグメント、[...slug] のキャッチオール、[[...slug]] のオプショナルキャッチオールで柔軟なURLを定義できる。
Server Componentsではasync/awaitで直接データ取得ができる。fetch APIは自動的にキャッシュされ、revalidateで再検証間隔を設定できる。
layout.tsxやpage.tsxからmetadataオブジェクトをexportすることで、<head>内のタイトルやOGP等を型安全に設定できる。
Next.jsはページごとにレンダリング戦略を選択できる。fetch optionsやgenerateStaticParamsの有無で自動判定される。