教材と出典について | Next.js はじめの一歩

コードを試す前に

基本演習はApp Router・JavaScript/JSX・Cache Components無効で進めます。11の有効化例は独立した発展実験です。01〜04は先に読んで、コードの実行は05の環境構築後に戻って試せます。

短い学習用の例です。各例は段階ごとの独立した例であり、全コードを一つのプロジェクトへ順に上書きして完成する形式ではありません。必要なファイル・依存関係・前提条件は注記に記載しています。

2026-10-06に公式ドキュメントのLatest表示16.3.8を確認。App Routerを軸とし、Next.js 16で導入されたCache Componentsは設定の有効・無効を分けて解説します。

手元のNext.js版・Router・cacheComponents設定を確認してください。キャッシュのオン/オフを混ぜず、旧教材の同期paramsやnext/routerをApp Routerへそのまま持ち込みません。

所要時間は本文の理解と小さな演習の目安です。環境構築、復習、最終制作にかかる時間は別です。

Next.jsを、JavaScriptで学ぶ

この教材は、Next.jsのApp Routerを中心に、JavaScriptの例で学べる初心者向けの学習ノートです。公式資料を2026年10月6日に確認し、レッスン・用語・問題の説明を作成しています。実際に開発するときは、使うNext.jsのバージョンに対応する公式資料も確認してください。

この学習サイトを作っているのはAstro

学習テーマはNext.jsですが、このサイト自体はAstroとJavaScriptで作成した静的サイトです。表示するNext.jsのコード例は教材です。このサイトの中でNext.jsのサーバーやコードを実行しているわけではありません。コピーしたコードは、各レッスンの条件に沿って自分のNext.jsプロジェクトで試してください。

進捗とクイズ結果の保存

完了したレッスンと各問題の最新の正誤は、このブラウザのlocalStorageに保存されます。別の端末やブラウザには同期されません。ブラウザのデータを消去すると学習記録も消えます。保存できない環境でも、教材とクイズは使えます。

公式資料

より詳しい仕様や、最新の変更はこちらから確認できます。各レッスンと問題の解説にも出典を掲載しています。