LESSON 18 · 約30分
次に学ぶことと、最終ミニ制作
基本を一つのアプリに結び、必要な発展領域を選びます。
コードを試す前に
基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。
短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。
開発環境の準備を確認する →このレッスンでわかること
- App RouterとPages Routerを見分けられる
- 小さな完成品を作る計画を立てられる
古い教材は、使うRouterから見分ける
pages/index.jsx、getStaticProps、getServerSideProps、next/routerが出てきたらPages Routerの文脈です。Pages Routerは現在もサポートされています。この教材のApp Routerではapp/page.jsx、Server Components、next/navigationを使います。両方のコードを無条件に混ぜないようにします。
発展機能は、困りごとが出てから選ぶ
Route GroupsはURLを変えずにルートを整理する仕組み。Parallel Routesは同じレイアウトに複数の表示領域を持たせる仕組み。Intercepting Routesは移動の文脈に応じて既存のルートを別の見せ方にする仕組みです。基本のURLとレイアウトができてから進みましょう。
現場では、長く使えることも大切
次の候補はTypeScript、DB設計、認証、国際化、アクセシビリティ、性能計測、監視、CI/CDです。全部を一度に追加するより、作るものに必要な順で学びます。アップグレード時は移行ガイドを読み、テストと設定を一緒に確認します。
Route Groupで整理する
app/
layout.jsx
(public)/
page.jsx → /
about/page.jsx → /about
(study)/
notes/page.jsx → /notes
notes/[slug]/page.jsx → /notes/react など丸括弧のグループ名はURLに入りません。異なるグループから同じURLを重複定義しないようにします。
TRY IT YOURSELF
学習ノートアプリを完成させる
- 一覧と詳細を作り、Linkでつなぐ
- 読了ボタンとタイトル検証フォームを追加する
- 読み込み・0件・404・失敗・本番ビルドを点検する
できたらOK：自分の言葉で、URL・部品・境界・データ・更新の流れを説明できる
QUICK CHECK
理解を確かめよう
公式資料でもう少し詳しく
ここまで読めたら、ひとつ前進。