お屋敷の廊下を歩くように｜第3回 Next.js入門

著者: 管理者 / 2025-08-17 (更新: 2025-08-17)

先生〜！✨ 前回はNext.jsでお部屋（ページ）を増やす方法を教えていただきましたわね。
でも……お部屋を作ったのはいいのですけれど、まだ扉や廊下がなくて行き来できませんの。
わたくし、ちょっと迷子になってしまいますわ。

良い観察です。
確かに今の状態では、住所（URL）を直接入力すれば入れますが、自然に行き来する「廊下」や「扉」が必要ですね。
今日は、その「ナビゲーション＝廊下と扉の作り方」を学びましょう。

まあ！お屋敷に廊下を通して扉を作る……なんだか素敵な響きですわ💕

前回の記事ティーポットを開いて準備開始｜第2回 Next.js入門

📝 Next.jsでのリンクの仕組み

Reactでは <a> タグでリンクを貼ることができますが、そのまま使うとページ全体が再読み込みされてしまいます。
Next.jsでは Link コンポーネント を使うことで、ページ遷移を高速に行うことができます。

import Link from 'next/link'

export default function Home() {
  return (
    <div>
      <h1>ようこそ、お嬢様のお屋敷へ</h1>
      <Link href="/about">自己紹介のお部屋へ</Link>
    </div>
  )
}

これで「自己紹介のお部屋へ」という文字が廊下に現れ、クリックすると /about ページに移動できます。

なるほど……普通の扉（``）だと、一度お屋敷を出て外から回り込んで入るようなものですのね。
`Link` コンポーネントなら、お屋敷の中の廊下をスムーズに歩ける……そんな違いかしら？

お見事な例えです。
`Link` を使えばお屋敷の中を移動するように、リロードなしで快適にページ間を移動できます。
訪問客（ユーザー）にとって、とても心地よい体験になりますね。

📝 複数ページをつなぐナビゲーション

お屋敷にいくつもお部屋があるなら、ちゃんとした廊下を整えた方が良いですよね。
次のように複数の Link を並べると、簡単にナビゲーションができます。

import Link from 'next/link'

export default function Layout() {
  return (
    <nav>
      <ul>
        <li><Link href="/">トップページ</Link></li>
        <li><Link href="/about">自己紹介</Link></li>
        <li><Link href="/contact">お問い合わせ</Link></li>
      </ul>
    </nav>
  )
}

これを共通レイアウトに組み込めば、どの部屋からでも好きなお部屋に移動できるようになります。

まあ〜！廊下に案内板を設置したみたいですわね✨
これなら迷子になることもありませんわ。

ええ。そしてナビゲーションを整えることは、ユーザーが心地よくサイトを歩き回るためにとても大切なことです。
お屋敷で言えば「どの扉も分かりやすく、行き止まりがない」ことが信頼につながりますね。

📝 ちょっと応用：アクティブリンク

訪問客が「今どのお部屋にいるか」を示すのも大切です。
例えば、現在いるページのリンクだけ特別な色にする工夫を加えられます。

import { useRouter } from 'next/router'
import Link from 'next/link'

export default function Nav() {
  const router = useRouter()

  return (
    <nav>
      <Link href="/" style={{ color: router.pathname === '/' ? 'red' : 'black' }}>
        トップ
      </Link>
      <Link href="/about" style={{ color: router.pathname === '/about' ? 'red' : 'black' }}>
        自己紹介
      </Link>
    </nav>
  )
}

これで、今いる部屋の扉だけ赤く光るイメージになります。

まあ！赤い絨毯の敷かれた扉みたいですわ〜✨
今どこにいるのかすぐ分かるなんて、まさにお屋敷のご案内係ですわね。

そうですね。ユーザーが迷わず歩けるように工夫することが、心地よいナビゲーション作りの秘訣です。
お屋敷の設計士としてのセンスが問われる部分ですね。