1. Next.js Pages Routerとは何か

Next.jsには画面の作り方としてPages Routerという仕組みがあります。 Pages Routerとは、pagesディレクトリの中にファイルを置くだけで、自動的にWebページとして表示される仕組みです。プログラミング未経験の人でも、フォルダとファイルの関係を理解すれば、画面構成を直感的に作れるのが特徴です。パソコンの中のフォルダがそのままWebサイトの地図になる、と考えるとイメージしやすいです。

2. pagesディレクトリの基本構成

Next.jsプロジェクトを作成すると、最初からpagesというフォルダがあります。このpagesディレクトリが、Pages Routerの中心です。ここに置かれたファイルは、すべてURLと直接つながります。例えばindex.jsはトップページを意味し、Webサイトの玄関のような存在です。


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

（ブラウザでトップページにアクセスすると「トップページです」と表示されます）

3. ファイル名とURLの関係

Pages Routerの最大の特徴は、ファイル名がそのままURLになる点です。例えばpages/about.jsというファイルを作ると、URLは/aboutになります。難しい設定を書かなくても、名前を決めるだけで画面が増えるのは、初心者にとって大きな安心材料です。


export default function About() {
  return <p>このページは会社紹介です</p>;
}

（/aboutにアクセスすると「このページは会社紹介です」と表示されます）

4. フォルダを使った階層構造

pagesディレクトリの中にフォルダを作ると、URLも階層構造になります。これは本棚にジャンルごとの棚を作るイメージに近いです。情報が増えても整理しやすく、実際のWeb制作でもよく使われます。


export default function BlogTop() {
  return <h2>ブログ一覧ページ</h2>;
}

（/blogにアクセスするとブログ一覧ページが表示されます）

5. 動的ルーティングの考え方

Pages Routerでは、ファイル名に角かっこを使うことで動的ルーティングができます。これは「番号が変わるページ」をまとめて扱う仕組みです。例えばブログ記事ごとにURLが変わる場合でも、1つのファイルで対応できます。


import { useRouter } from "next/router";

export default function BlogDetail() {
  const router = useRouter();
  return <p>記事ID: {router.query.id}</p>;
}

（/blog/1 のようにアクセスすると、数字が画面に表示されます）

6. _app.jsと全ページ共通処理

pagesディレクトリには_app.jsという特別なファイルがあります。これはすべてのページに共通する処理を書くための場所です。例えば共通のレイアウトや文字の設定などをまとめて管理できます。毎回同じコードを書く必要がなくなり、ミスも減らせます。


export default function MyApp({ Component, pageProps }) {
  return (
    <div>
      <Component {...pageProps} />
    </div>
  );
}

7. Pages Routerと初心者の相性が良い理由

Pages Routerは、フォルダ構成とURLが直結しているため、仕組みがとてもシンプルです。プログラミング未経験の人でも、パソコンのフォルダ操作ができれば理解できます。難しい専門用語に触れる前に、Webサイトの全体像を体で覚えられる点が大きな魅力です。 Next.jsを学び始める第一歩として、pagesディレクトリの理解は欠かせません。