Next.jsで学ぶReact講座（完全初心者向け・30日）演習問題・課題 | 第3章：Next.jsらしさ – ページ遷移

この課題のねらい
必須課題① 2ページ作成（URLとファイルを意識する）
1. トップページ（/）を用意する
2. 2つ目のページ（例：/about）を作る
必須課題② Linkでページ遷移（SPA的な動きを体感する）
挑戦課題ナビゲーションメニュー作成（共通UIを使い回す）
まとめ：Next.jsらしい「ページ遷移」の感覚

この課題のねらい

この演習は「Next.jsならではのページ遷移の感覚」をつかむのがテーマです。
やることはシンプルですが、アプリっぽさが一気に増えるポイントでもあります。

2つのページを作る
Link コンポーネントでページ間を遷移させる
さらに、共通のナビゲーションメニューを作って複数ページを行き来できるようにする

この流れを体験すると、「URL とファイル構造」と「SPA 的ななめらかな遷移」が頭の中でつながります。

必須課題① 2ページ作成（URLとファイルを意識する）

トップページ（/）を用意する

まずは app/page.tsx。ここが /（トップページ）になります。
すでにあると思うので、シンプルな内容にしておきます。

// app/page.tsx
export default function HomePage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>ホームページ</h1>
      <p>ここはトップページです。</p>
    </main>
  );
}

// app/page.tsx
export default function HomePage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>ホームページ</h1>
      <p>ここはトップページです。</p>
    </main>
  );
}

TSX

このファイルが「http://localhost:3000/ に対応している」ことを、まずは意識しておいてください。

2つ目のページ（例：/about）を作る

次に、/about という URL で表示されるページを作ります。
やることは 1 つだけで、app/about/page.tsx を作ることです。

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座のサンプルサイトです。</p>
    </main>
  );
}

// app/about/page.tsx
export default function AboutPage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座のサンプルサイトです。</p>
    </main>
  );
}

TSX

これで、

app/page.tsx → /
app/about/page.tsx → /about

という対応関係ができました。

ブラウザで

http://localhost:3000/
http://localhost:3000/about

の両方を開いてみて、それぞれ別の画面が表示されることを確認してみてください。

必須課題② Linkでページ遷移（SPA的な動きを体感する）

なぜ aタグではなく Link を使うのか

Next.js では、ページ間のリンクに通常の <a href="..."> ではなく、
next/link の Link コンポーネントを使うのが基本です。

理由は、

ページ全体をリロードせずに
必要な部分だけ切り替えてくれる
その結果、速くてなめらかな遷移になる

からです。いわゆる SPA 的な挙動ですね。

ホームから /about へ遷移するリンクを作る

トップページに「このサイトについてへ」というリンクを置いてみましょう。

// app/page.tsx
import Link from "next/link";

export default function HomePage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>ホームページ</h1>
      <p>ここはトップページです。</p>

      <p style={{ marginTop: "16px" }}>
        <Link href="/about">このサイトについてを見る</Link>
      </p>
    </main>
  );
}

// app/page.tsx
import Link from "next/link";

export default function HomePage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>ホームページ</h1>
      <p>ここはトップページです。</p>

      <p style={{ marginTop: "16px" }}>
        <Link href="/about">このサイトについてを見る</Link>
      </p>
    </main>
  );
}

TSX

重要ポイントは、

ファイルの先頭で import Link from "next/link"; を書く
<Link href="/about">...</Link> の形で使う

の 2 つです。

ブラウザで / にアクセスし、
「このサイトについてを見る」をクリックすると、
ページ全体のリロードなしで /about に切り替わるはずです。

戻る ボタンで戻ったり、何度かページを行き来してみて、
「普通の a タグより体感的に速い」ことも感じてもらえるといいです。

/about からホームに戻るリンクも作る

/about ページからトップに戻るリンクも付けて、往復できるようにしてみましょう。

// app/about/page.tsx
import Link from "next/link";

export default function AboutPage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座のサンプルサイトです。</p>

      <p style={{ marginTop: "16px" }}>
        <Link href="/">ホームに戻る</Link>
      </p>
    </main>
  );
}

// app/about/page.tsx
import Link from "next/link";

export default function AboutPage() {
  return (
    <main style={{ padding: "24px", fontFamily: "sans-serif" }}>
      <h1>このサイトについて</h1>
      <p>Next.js × React 入門講座のサンプルサイトです。</p>

      <p style={{ marginTop: "16px" }}>
        <Link href="/">ホームに戻る</Link>
      </p>
    </main>
  );
}

TSX

この時点で、「ファイル構造→URL→Linkで遷移」という Next.js の基本ループは体験できています。

挑戦課題ナビゲーションメニュー作成（共通UIを使い回す）

共通ナビゲーションのイメージ

次のステップは、「どのページでも共通のナビゲーションメニュー」を作ることです。

やりたいのは、例えばこういうメニューです。

ホーム
このサイトについて
（これから増えるかもしれないページへのリンク）

これをすべてのページにコピペすると大変なので、
Next.js の layout.tsx を使って「共通レイアウト」に載せていきます。

app/layout.tsx にナビゲーションを書く

すでに app/layout.tsx があるはずなので、中身を簡略化して
共通ヘッダー＋ナビゲーションを追加してみましょう。

// app/layout.tsx
import type { ReactNode } from "react";
import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ja">
      <body style={{ margin: 0, fontFamily: "sans-serif" }}>
        <header
          style={{
            padding: "12px 24px",
            borderBottom: "1px solid #e5e7eb",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div style={{ fontWeight: "bold" }}>Next.js × React 入門</div>

          <nav style={{ display: "flex", gap: "16px" }}>
            <Link href="/">ホーム</Link>
            <Link href="/about">このサイトについて</Link>
          </nav>
        </header>

        <main style={{ padding: "24px" }}>{children}</main>
      </body>
    </html>
  );
}

// app/layout.tsx
import type { ReactNode } from "react";
import Link from "next/link";
import "./globals.css";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="ja">
      <body style={{ margin: 0, fontFamily: "sans-serif" }}>
        <header
          style={{
            padding: "12px 24px",
            borderBottom: "1px solid #e5e7eb",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <div style={{ fontWeight: "bold" }}>Next.js × React 入門</div>

          <nav style={{ display: "flex", gap: "16px" }}>
            <Link href="/">ホーム</Link>
            <Link href="/about">このサイトについて</Link>
          </nav>
        </header>

        <main style={{ padding: "24px" }}>{children}</main>
      </body>
    </html>
  );
}

TSX

ここでやっていることはこうです。

RootLayout は、すべてのページを包む共通レイアウト。
<header> ... <nav> ... </nav> </header> の中に Link でナビゲーションを作った。
{children} の部分に、各ページの内容（app/page.tsx や app/about/page.tsx の中身）が差し込まれる。

これで、どのページを表示しても、
上部に同じナビゲーションメニューが表示されるようになります。

ページ側は「中身だけを書く」状態にする

共通レイアウトがしっかりしていると、
各ページ app/page.tsx や app/about/page.tsx は「中身だけ」書けばよくなります。

例えば、トップページを次のようにシンプルにできます。

// app/page.tsx
export default function HomePage() {
  return (
    <>
      <h1>ホームページ</h1>
      <p>ここはトップページです。</p>
    </>
  );
}

// app/page.tsx
export default function HomePage() {
  return (
    <>
      <h1>ホームページ</h1>
      <p>ここはトップページです。</p>
    </>
  );
}

TSX

layout.tsx の <main> が既にあるので、
ページ側は <main> を二重に書かなくても OK です（書いても動きますが、整理するなら消してよい）。

まとめ：Next.jsらしい「ページ遷移」の感覚

この演習でつかんでほしいのは、次のような感覚です。

app/◯◯/page.tsx を作ると、URL /◯◯ のページができる
next/link の Link を使うと、ページ全体をリロードせずになめらかに遷移できる
layout.tsx にナビゲーションを書けば、すべてのページで共通のメニューを使い回せる

ここが押さえられていると、

講座一覧ページ /lessons
講座詳細ページ /lessons/[id]
プロフィールページ /profile

といった複数ページ構成のアプリでも、
迷わず「ファイル構成 → URL → Nav → Link」という流れを組めるようになります。

もしよければ、挑戦として

もう 1 ページ（例：/contact）を増やしてレイアウトに追加する
今のナビに「今どのページか」が分かるような簡単な見た目の工夫を入れてみる

などもやってみてください。

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31