「Next.jsらしさ」とページ遷移
ここまでで「1ページの中で動く React」はかなりイメージできてきたと思います。
ここからは「Next.js らしさ」がグッと出てくるところ――ページ遷移と複数ページ構成です。
ふつうの React だけだと「ルーティング（URLごとの画面切り替え）」を自分で設定する必要がありますが、Next.js では
フォルダ構造 ＝ URL構造
という強力なルールと、Link コンポーネントのおかげで、かなり直感的に SPA っぽいページ遷移が作れます。
複数ページ作成と URL の対応
app ディレクトリと URL のルール
Next.js（App Router）の世界では、app ディレクトリの中身がそのまま「サイト構造」になります。
基本ルールはこれだけです。
app/page.tsx → /（トップページ）app/about/page.tsx → /aboutapp/profile/page.tsx → /profile
つまり、
フォルダ名が URL の一部
その中の page.tsx が、その URL に対応する画面
という対応です。
だから、「プロフィールページを作りたいな」と思ったら、
app/profile/page.tsx を作る
と決めればよいだけです。
実際に 2 ページ作ってみるイメージ
例として、ホームページとプロフィールページの 2 ページ構成を考えてみましょう。
app/page.tsx（ホーム）:
// app/page.tsx
import Link from "next/link";
export default function HomePage() {
return (
<main style={{ padding: "32px", fontFamily: "sans-serif" }}>
<h1>ホーム</h1>
<p>ここはトップページです。</p>
<p>
<Link href="/profile">プロフィールページへ</Link>
</p>
</main>
);
}
app/profile/page.tsx（プロフィール）:
// app/profile/page.tsx
import Link from "next/link";
export default function ProfilePage() {
return (
<main style={{ padding: "32px", fontFamily: "sans-serif" }}>
<h1>プロフィール</h1>
<p>名前：太郎</p>
<p>職業：エンジニア</p>
<p>
<Link href="/">ホームに戻る</Link>
</p>
</main>
);
}
これだけで、
/ にアクセス → ホーム/profile にアクセス → プロフィール
という複数ページ構成が成立します。
ルーティング設定ファイルも、難しい設定も不要なのが Next.js らしさです。
Link の使い方（Next.js らしいページ遷移）
なぜ <a> ではなく Link を使うのか
HTML ではリンクと言えば <a href="..."> ですよね。
Next.js でも <a> は使えますが、ページ間遷移には基本的に next/link の Link コンポーネントを使います。
理由は Next.js が Link 経由の遷移を
ページ全体をリロードせず
必要なデータだけを取りに行き
画面をサクッと切り替えてくれる
ように最適化してくれるからです。
これが「Next.js らしい SPA っぽさ」の大きな部分です。
Link の基本形
使い方はとてもシンプルです。
import Link from "next/link";
<Link href="/profile">プロフィールページへ</Link>
見た目はほぼ <a href="/profile"> と同じですが、中身は全然違います。
ブラウザ視点で起きていることをイメージすると、
ブラウザ全体のリロードはしない
Next.js が内部で「/profile 用のコンポーネント」を差し替える
必要なデータをうまく取りに行きつつ、画面を素早く切り替える
という流れです。
URLと画面の対応を身体で覚える
「URLを見たら、どのファイルか分かる」状態へ
Next.js に慣れてくると、
/ → app/page.tsx/profile → app/profile/page.tsx/settings/account → app/settings/account/page.tsx
という対応が、自動的に頭の中でマッピングされるようになります。
この感覚が身につくと、
「このURLのページを増やしたい」
→ 「じゃあ app/○○/page.tsx を作ろう」
と自然に設計できるようになります。
小さな 3 ページサイトを例に整理する
例えば、こんなミニサイトを考えます。
ホーム /
プロフィール /profile
お問い合わせ /contact
これに対応する app の構成はこうです。
app/page.tsxapp/profile/page.tsxapp/contact/page.tsx
それぞれのページで Link を使えば、こんな感じで行き来できます。
ホームにナビゲーションを置くイメージ:
// app/page.tsx
import Link from "next/link";
export default function HomePage() {
return (
<main>
<h1>ホーム</h1>
<p>Next.js × React の練習サイトです。</p>
<nav>
<p><Link href="/profile">プロフィール</Link></p>
<p><Link href="/contact">お問い合わせ</Link></p>
</nav>
</main>
);
}
それぞれのページからもホームに戻るリンクを置けば、
「URL ↔ 画面」の対応が自然に体に染みてきます。
SPA の感覚をつかむ（Next.js らしさの核心）
「リロードされていないのに画面だけ切り替わる」体験
ふつうの Web サイトのページ遷移は、
リンククリック
ブラウザがサーバーに新しいページをリクエスト
HTML 全体を受け取って、画面を丸ごと描き直す
という流れなので、一瞬「白くなって→新しいページ」が出るような感じになります。
Next.js の Link を使った遷移は、こうです。
リンククリック
Next.js が「アプリの内部」でページコンポーネントを切り替える
共通レイアウト部分はそのまま、中身だけスッと変わる
ブラウザ全体のリロードは起きない
体感としては、
タブのリロードアイコンがクルクルしない
ヘッダーやフッターなど共通部分が固定されていて、コンテンツだけ変わる感覚
戻るボタンなどブラウザの履歴はちゃんと動いてくれる
という、「アプリっぽい動き」が自然に手に入ります。
Next.js は「SSR ＋ SPA」をいい感じに混ぜている
もう一つ、Next.js らしいポイントを言葉でだけ触れておきます。
初回アクセス（例えば / を最初に開いたとき）は、
サーバー側で HTML を組み立てて送り返す（SSR / SSG 的な動き）。
その後のページ遷移（Link クリック）は、
React による SPA 的なクライアントサイドの画面切り替えになる。
つまり、
最初の表示は「SEO に強く、表示が速いサーバーサイド」
そのあとは「操作感の良い SPA 的な遷移」
という「おいしいとこ取り」をしてくれます。
このあたりの複雑な仕組みは、今の段階では 意識しなくて大丈夫です。
開発者としては、
URL ごとに page.tsx を用意する
ページ間のリンクは Link でつなぐ
だけ守っていれば、勝手に「Next.js らしい動き」になってくれます。
まとめとおすすめ練習
ここまでのポイントを、次のように整理できます。
Next.js の App Router では、app ディレクトリのフォルダ構造がそのまま URL に対応し、app/profile/page.tsx は /profile になる。
複数ページを作るには、目的の URL に対応するフォルダを app の下に作り、その中に page.tsx を置くだけでよい。
ページ間の遷移には next/link の Link コンポーネントを使い、<Link href="/xxx">ラベル</Link> と書くことで、SPA らしい「画面だけスッと切り替わる」遷移が手に入る。
Next.js は「最初の表示はサーバーでしっかり描画」「その後の遷移はクライアントで軽く切り替え」というハイブリッド構成で、開発者は URL と page.tsx、Link だけ意識すればその恩恵を受けられる。
練習としては、ぜひ次のような 3〜4ページのミニサイトを作ってみてください。
トップ /
プロフィール /profile
講座一覧 /courses
講座の詳細ダミー /courses/basic
それぞれのページに Link を貼って、
「URL とフォルダ」と「Link 遷移」の関係が、感覚としてつかめてきたら、もう Next.js らしさの入り口にはしっかり立てています。
