先生と生徒の会話形式で理解しよう

生徒

「Next.jsにはルーターがあるって聞いたんですが、Pages Routerって何ですか？」

先生

「Pages Routerは、Next.js 13より前で標準として使われていた画面切り替えの仕組みです。」

生徒

「画面切り替えって、普通のWebサイトと何が違うんですか？」

先生

「ファイルを置くだけでページが作れる、とても分かりやすい仕組みなんですよ。」

1. Next.js Pages Routerとは何か

Next.js Pages Routerとは、Next.jsでページ遷移を管理するための仕組みです。 Pages Routerでは、pagesフォルダの中にファイルを置くだけで、そのファイルがWebページとして表示されます。

たとえば、ノートにページ番号を書くだけで目次が完成するような感覚です。プログラミング未経験の方でも、ファイル名とURLが対応するため理解しやすい特徴があります。

2. Pages Routerが13以前の標準だった理由

Next.js 13以前では、このPages Routerが標準でした。理由は、仕組みがシンプルで学習コストが低く、初心者から上級者まで幅広く使いやすかったからです。

特別な設定をしなくても、ページ表示、画面遷移、データ取得まで行えるため、 Webアプリ開発の入門として多く利用されてきました。

3. pagesフォルダとURLの関係

Pages Routerの最大の特徴は、ファイル構成とURLが直結している点です。 pages/index.jsはトップページ、 pages/about.jsは「/about」というURLになります。


export default function Home() {
  return <h1>トップページです</h1>;
}

（ブラウザでトップページを開くと「トップページです」と表示されます）

4. ページ遷移の基本的な考え方

Pages Routerでは、ページ遷移は「別のページへ移動する」という考え方です。本のページをめくるようなイメージで、それぞれのページが独立しています。

Next.jsでは、通常のHTMLリンクではなく、専用の仕組みを使うことで高速な画面遷移が可能になります。


import Link from "next/link";

export default function AboutLink() {
  return <Link href="/about">Aboutページへ</Link>;
}

（リンクをクリックすると、画面が切り替わってAboutページが表示されます）

5. 動的ルーティングの仕組み

Pages Routerでは、動的ルーティングも簡単に作れます。動的とは、URLの一部が変わる仕組みのことです。

たとえば、商品ページやユーザー詳細ページなどで活躍します。ファイル名を角かっこで囲むだけで実現できます。


import { useRouter } from "next/router";

export default function UserPage() {
  const router = useRouter();
  const { id } = router.query;

  return <p>ユーザーIDは {id} です</p>;
}

（URLに応じて表示されるIDの内容が変わります）

6. データ取得とPages Router

Pages Routerでは、ページ表示と同時にデータを取得する仕組みも用意されています。これにより、ページを開いた時点で必要な情報を表示できます。

サーバー側でデータを準備するため、検索エンジンにも内容が伝わりやすい特徴があります。


export async function getServerSideProps() {
  return {
    props: {
      message: "サーバーからのデータです"
    }
  };
}

export default function Page({ message }) {
  return <h1>{message}</h1>;
}

（画面にサーバーから取得したメッセージが表示されます）