Chapter 1: ReactとNext.jsの概要
React と Next.js がどんな課題を解決し，どのように役割分担しているのかを最初に整理しておきましょう。ここで全体像を押さえておくと，以降のハンズオンが理解しやすくなります。
Web アプリを形作る要素
モダンな Web アプリケーションでは，次のような要素を組み合わせて体験を作ります。
気に留めておきたい観点
- UI（ユーザーインターフェース）：画面上でユーザーが触れるパーツ
- ルーティング：ページや画面をどう切り替えるか
- データ取得：どこから情報を持ってくるか
- レンダリング：いつ，どこで UI を生成するか（サーバー？ブラウザ？）
- 外部サービス連携：認証・CMS・決済などとの接続
- インフラ：アプリをどこに置き，どう配信するか
- パフォーマンス / DX：高速で快適な体験をどう維持するか
これらのすべてを手作りするのは大変なので，ライブラリやフレームワークを上手に組み合わせて開発します。
React とは？
React は，UI を宣言的に記述できる JavaScript ライブラリ です。
「ナビゲーション」「カード」「リスト」など，画面を構成する要素をコンポーネントとしてまとめ，組み合わせながら UI を構築します。
React が得意なこと
- ボタンを押したらカウントが増える
- 入力フォームの内容に応じて表示を切り替える
- ページの一部分だけ更新して，ほかの部分はそのままにしておく
React は UI を描画する仕組みに集中しており，「どう組み合わせるか」「どのツールと一緒に使うか」は開発者次第です。ここがライブラリと呼ばれる理由です。
Next.js とは？
Next.js は，React を基盤にした フレームワーク です。
ルーティング，データ取得，レンダリング戦略，ビルドやデプロイの最適化など，アプリ全体に必要な機能をセットで提供してくれます。
Next.js が肩代わりしてくれること
- ページをファイルベースで管理し，自動的にルーティング
- サーバー側でデータを取得し，最適なタイミングでレンダリング
- 画像やフォントの最適化，キャッシュ戦略の構築
- API ルートや Edge Functions などバックエンド機能の補助
つまり React で UI を表現しやすくし，Next.js はその UI を「いつ・どこで・どう届けるか」を整えてくれる存在です。
まとめと次のステップ
- React は UI を構築・再利用するためのライブラリ
- Next.js は React を取り巻く設定やインフラの悩みを肩代わりするフレームワーク
- 両者を組み合わせることで，個人開発から大規模開発まで一貫した体験を設計できる
次の Chapter では，ブラウザが UI をどのように描画しているのかを観察しながら，React が登場する背景を掘り下げます。