ちょっと学ぶプログラミングルートとURL
ページ・動的ルーティング・Link・検索条件
1ページとレイアウトフォルダ・URL・layoutの関係を確かめる。
2動的ルーティング（Dynamic Segments）[id]とparamsから、商品の取得・表示・notFoundまでを学ぶ。
3LinkでページをつなぐLinkのhrefと表示する文字を指定する。
4URLから検索条件を読むsearchParamsをawaitし、クエリの文字列・未指定・複数指定を読む。
描画とデータ取得
Server / Client・データ取得・エラー表示・Metadata・キャッシュ
5サーバーとクライアントServerとClientの役割と境界を確かめる。
6データを待って表示する待ちの表示とデータの成功・失敗を分ける。fetchはHTTPステータスも確認する。
7待機・失敗・見つからないを分けるloading・error・not-foundが表示される条件を分けて確認する。
8ページのタイトルを設定するmetadataのtitle・descriptionと本文を区別する。
9Metadataをデータに合わせて作るgenerateMetadata・params・本文とタイトル
10キャッシュの条件を読むforce-cacheとno-storeで、保存済み応答を使う条件を学ぶ。
フォームとサーバー処理
Server Actions・フォームの状態・再検証・HTTP・Cookie
11フォームからServer Actionを呼ぶServer Actionはサーバーで実行する非同期関数です。formのactionに渡すと送信したFormDataを受け取ります。この例は入力検証と移動だけで、データベース保存は行いません。
12Server Actionとフォームの状態React Baseのフォーム系HooksをServer Actionにつなぐ。
13保存・再検証・移動の順序revalidatePathとredirectの引数・順序・失敗時の分岐を学ぶ。
14Route HandlerでHTTPを受けるPOST・request.json・Response.jsonでHTTPの入口を書く。
15Cookieと公開する環境変数Cookieの値と初期値を読み、公開する環境変数を区別する。
教材の前提
URL・境界・データ取得から、Server Actions・HTTPまで学ぶApp Router入門。Reactとimport/exportを学んだ方向けです。Next.js 16.3.4・React 19.2.0、Cache Components無効を基準に、主要例を本番ビルドで検証しています。
進捗はこのブラウザに保存します。file:// では保存できない場合もありますが、学習は続けられます。