Next.js Routingの基本をわかりやすく解説！初心者でも理解できるフォルダ構造とページ遷移

Next.js Routingの仕組み（フォルダ構造＝ルーティング）

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

生徒

「先生、Next.jsでページを作るとき、どうやってURLに対応させるんですか？」

先生

「Next.jsでは、フォルダやファイルの構造がそのままURLになります。これをルーティングと呼びます。」

生徒

「フォルダやファイルを作るだけでURLができるんですか？」

先生

「はい、例えばpagesフォルダにabout.jsを作ると、自動で /about というURLでアクセスできるようになります。」

1. Next.jsのRoutingとは？

Next.jsのRoutingは、ページごとにURLを自動で割り当てる仕組みです。特別な設定をしなくても、pagesフォルダ内のファイル名がそのままURLになります。例えば、pages/contact.jsを作ると、ブラウザで http://localhost:3000/contact にアクセスできます。

2. 基本的なフォルダ構造とページの作り方

Next.jsのプロジェクトでは、pagesフォルダが中心です。ここに作ったファイルがそのままページになります。


pages/
├─ index.js      // トップページ → URL: /
├─ about.js      // Aboutページ → URL: /about
├─ contact.js    // Contactページ → URL: /contact

（pagesフォルダに作ったabout.jsは、ブラウザで /about にアクセスすると表示されます）

3. ネストしたフォルダで階層を作る

フォルダを作ることでURLに階層を作れます。例えば、ブログの記事ページを作る場合は以下のように構成します。


pages/
├─ blog/
│   ├─ index.js       // ブログ一覧 → /blog
│   └─ first-post.js  // 記事ページ → /blog/first-post

（blogフォルダのindex.jsは /blog、first-post.jsは /blog/first-post にアクセスできます）

4. 動的ルーティングの基本

Next.jsでは角括弧 [ ] を使うと、動的にURLを作ることができます。例えば、ユーザーIDによって表示内容を変える場合です。


pages/
├─ user/
│   └─ [id].js   // 動的ルーティング → /user/1, /user/2 など


import { useRouter } from "next/router";

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

  return <h1>ユーザーID: {id}</h1>;
}

（/user/1 にアクセスすると「ユーザーID: 1」と表示されます）

5. Linkコンポーネントでページ遷移

Next.jsでは、next/linkを使ってページ間を移動できます。HTMLのタグの代わりにを使うことで、画面遷移が高速化されます。


import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>ホームページ</h1>
      <Link href="/about">Aboutページへ</Link>
    </div>
  );
}

（リンクをクリックするとAboutページに高速で遷移します）

6. APIルートとルーティング

Next.jsではpages/apiフォルダにファイルを作るとAPIとして動かせます。URLはファイル名に対応します。


pages/
├─ api/
│   └─ hello.js   // URL: /api/hello


export default function handler(req, res) {
  res.status(200).json({ message: "Hello Next.js API!" });
}

（/api/hello にアクセスするとJSON形式で { "message": "Hello Next.js API!" } が返ってきます）

7. まとめと補足ポイント

Next.jsのRoutingは、基本的にファイルとフォルダ構造がURLになるシンプルな仕組みです。静的ページも動的ページも簡単に作成でき、Linkコンポーネントを使うとページ遷移も高速です。APIルートも同じ考え方でURLを管理できます。

初心者の方は、まずpagesフォルダにindex.jsを作ってトップページを表示し、徐々にフォルダを追加してページを増やす練習をすると理解しやすいです。

まとめ

Next.jsのRoutingは、初心者でも理解しやすい仕組みで、フォルダやファイルの構造がそのままURLとして反映される点が特徴です。pagesフォルダ内にファイルを作成するだけで自動的にURLが割り当てられるため、複雑な設定をせずにウェブページを作成できます。例えば、pages/about.jsを作ると /about にアクセス可能になり、トップページは index.js が / に対応します。また、フォルダを作ることで階層的なURLを作れるため、ブログや商品ページなどの構造化されたページ作成も容易です。

動的ルーティングを活用することで、ユーザーIDや記事IDなど変動する情報に応じたページを簡単に生成できます。角括弧 [ ] を使うだけで、/user/1 や /user/2 のようにURLパラメータを受け取れるページを作成可能です。これにより、CMSのようなデータ駆動型ページやユーザーごとのカスタマイズページの構築もスムーズに行えます。

ページ遷移には next/link を使用することで、従来のタグに比べてクライアントサイドでの高速なページ移動が実現できます。ユーザーの操作体験を向上させるだけでなく、SEOにおいても内部リンクが適切に構築されるため、検索エンジンからの評価にも有利です。

APIルートも同様に pages/api フォルダ内にファイルを作るだけで自動的にURLが設定され、サーバーサイドでの処理を簡単に行えます。JSON形式でデータを返すAPIをすぐに構築できるため、フロントエンドとのデータ連携や動的コンテンツ表示も効率的に行えます。

まとめると、Next.jsのRoutingは以下のポイントを押さえると理解が深まります。まず、ファイル・フォルダ構造がURLになること、次に動的ルーティングで変動するURLに対応できること、Linkコンポーネントで高速ページ遷移が可能なこと、そしてAPIルートによるバックエンド処理の実装も統合的に管理できることです。この流れを踏まえて、まずはトップページを作成し、徐々にフォルダや動的ルートを追加していく練習をすると効果的です。


import Link from "next/link";

export default function Home() {
  return (
    <div>
      <h1>Next.jsルーティング入門</h1>
      <Link href="/about">Aboutページへ</Link>
      <Link href="/blog/first-post">記事ページへ</Link>
    </div>
  );
}