Chapter 8: ReactからNext.jsへ

React の基礎（Component / Props / State）を一通り体験できました。ここでは学んだ内容を振り返りつつ，Next.js で本格的なアプリケーションを構築する準備を整えます。

これまでに作ったコードを確認する

以下は Chapter 3〜7 を通じて完成した index.html の全体像です。ブラウザで動作を確認したい場合はそのままコピペして使えます。

index.html

<html>
  <body>
    <div id="app"></div>

    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/jsx">
      const app = document.getElementById("app");

      function Header({ title }) {
        return <h1>{title ? title : "Default title"}</h1>;
      }

      function HomePage() {
        const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"];
        const [likes, setLikes] = React.useState(0);

        function handleClick() {
          setLikes(likes + 1);
        }

        return (
          <div>
            <Header title="Develop. Preview. Ship." />
            <ul>
              {names.map((name) => (
                <li key={name}>{name}</li>
              ))}
            </ul>
            <button onClick={handleClick}>Like ({likes})</button>
          </div>
        );
      }

      const root = ReactDOM.createRoot(app);
      root.render(<HomePage />);
    </script>
  </body>
</html>

3つの基礎概念をおさらい

概念	役割	例
Component	UI を組み立てる部品	`Header` / `HomePage`
Props	データの受け渡し	`Header title="..."`
State	時間とともに変化する値	`useState(0)` でカウントを管理

これらを押さえておけば，画面を組み立てて動かすための土台ができあがります。

React だけで開発を進めると…

<script> タグに依存した手法は学習や小規模な導入には便利ですが，実際のサービス開発では次のような課題に直面します。

規模が大きくなると困ること

ルーティングやビルド設定を自分で整える必要がある
画像やフォントの最適化，SSR（サーバーサイドレンダリング）の設定が大変
Server Component / Client Component などの新機能を活用しづらい

フレームワークを使うことで，これらの設定を省力化し，プロダクトに集中できます。

Next.js が提供してくれるもの

Next.js は React をベースにしたフレームワークで，以下のような機能がセットで提供されます。

ファイルベースのルーティングとレイアウト
最適化されたデータ取得（Server Actions / fetch のキャッシュ）
画像・フォントの自動最適化
Server Components と Client Components の共存
ビルドとデプロイの自動化（Vercel との相性が特に良い）

React 単体で書いていたコードを Next.js プロジェクト内に移すだけで，これらの機能がすぐに使えるようになります。

次のステップ

最後の Chapter では Next.js プロジェクトを新規作成し，React で書いた UI を移し替える手順を確認します。ここまでで理解したコンセプトが，Next.js でどのように活かされるのかを体験しましょう。