Chapter 9: Next.jsの導入

ここからは React で作った UI を Next.js プロジェクトへ移行します。Pages Router を利用した構成で進めるため，create-next-app の質問にも合わせて回答していきましょう。

Warning

本章の流れは原著（React Foundations）から大きくアレンジしています。既存の index.html にライブラリを追加するのではなく，新しい Next.js プロジェクトを作成する 方式で進めます。

事前準備

環境の確認

Node.js 20 以上がインストールされているか確認してください。
環境構築を完了していない場合は先に済ませましょう。

ターミナルで作業用ディレクトリに移動し，次のコマンドを実行します。

Terminal

npx create-next-app@latest nextjs-learn

初回は create-next-app のインストール可否を聞かれるので y を入力して Enter。

質問への回答ガイド

✔ Would you like to use TypeScript? … No / Yes
✔ Which linter would you like to use? › ESLint
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like your code inside a `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to use Turbopack? (recommended) … No / Yes
✔ Would you like to customize the import alias (`@/*` by default)? … No / Yes

質問	選択	理由
TypeScript?	Yes	学内プロジェクトも TypeScript を採用。
Linter?	ESLint	既定の設定で OK。
Tailwind CSS?	Yes	便利なユーティリティ。後から追加も可能。
`src/` ディレクトリ?	No	Pages Router でのサンプルがシンプルになるため。
App Router?	No	ここでは Pages Router を使う（学祭サイトと同じ構成）。
Turbopack?	Yes	開発サーバーが高速になります。
Import alias?	No	既定の `@/*` をそのまま利用。

コマンドが完了すると nextjs-learn フォルダが作成されます。VSCode で開いて構成を確認しましょう。

Terminal

cd nextjs-learn
code .

プロジェクト構成のポイント

pages/
Pages Router のルーティングを担うフォルダ。pages/index.tsx が / に対応します。
pages/_app.tsx
全ページを包むレイアウトを定義。グローバル CSS の読み込みもここで行います。
pages/api/
サーバーサイド処理（API Routes）を追加したい場合に利用。
public/
画像やアイコンなどの静的ファイル置き場。/logo.png のように公開されます。
styles/
CSS モジュールやグローバルスタイルを保存。
package.json
依存パッケージと npm スクリプト (npm run dev など) を管理。
next.config.ts / tsconfig.json
フレームワークや TypeScript の設定。最初は触らなくて OK。

npm run dev を実行すると開発サーバーが起動し，http://localhost:3000 に初期ページが表示されます。

Terminal

npm run dev

表示される Next.js のウェルカムページが確認できれば準備完了です。

React のコードを移し替える

Chapter 8 までに作成した React のコードから，<script> の部分だけを取り出し pages/index.tsx に貼り付けます。次のように書き換えていきましょう。

pages/index.tsx

import { useState } from 'react';

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

export default function HomePage() {
  const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"];
  const [likes, setLikes] = 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>
  );
}

ポイントは次のとおりです。

移行時のチェック

useState を react からインポートする（CDN ではなく npm 依存を利用）。
React.useState → useState に書き換える。
export default を付けてページとして公開する。
TypeScript なので props の型（ここでは title?: string）を付ける。

ブラウザをリロードし，Like ボタンを押すとカウントが増えることを確認しましょう。

ここまでの流れを整理

pages/index.tsx
import { useState } from 'react';

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

export default function HomePage() {
  const names = ["Ada Lovelace", "Grace Hopper", "Margaret Hamilton"];
  const [likes, setLikes] = 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>
  );
}

構造を見ると、いくつかのコンポーネントを組み合わせて 1 つのページを構成しているだけです。Pages Router ではこのコンポーネントを export default することで URL に紐づけられます。

次の一歩

ここまで終えれば，千葉大祭サイトや学内システムで使われている Next.js（Pages Router）の基本操作を体験できています。
デザインを整えたい場合は Tailwind CSS や CSS Modules を試してみましょう。
理解を深めたいときはこの React コースを復習したり，Next.js のチュートリアルで API Routes やデータ取得を学ぶのがおすすめです。

何度か手を動かして慣れてくると，コードの意味が自然と理解できるようになります。引き続き手を動かして，実行委員会の開発に活かしていきましょう！