Next.js自動ルーティングを初心者向けに解説！Next.jsのページ遷移の基本を理解する

1. pagesフォルダと自動ルーティングの基本

1. pagesフォルダと自動ルーティングの基本

Next.jsではプロジェクト内の pages フォルダが特別な意味を持っています。このフォルダに作成したファイルが自動でURLに対応します。例えば pages/about.js を作ると、ブラウザで /about というURLでページを表示できます。

function About() {
  return <h1>Aboutページです</h1>;
}

export default About;

2. index.jsはホームページに対応

2. index.jsはホームページに対応

トップページは pages/index.js が自動的にルート（/）に対応します。ファイル名が index の場合、特別にルートのURLとして扱われます。

function Home() {
  return <h1>ホームページです</h1>;
}

export default Home;

3. サブフォルダを作って階層的にルーティング

3. サブフォルダを作って階層的にルーティング

pagesフォルダ内にサブフォルダを作ると、URLも自動的に階層構造になります。例えば pages/blog/first.js を作ると、URLは /blog/first になります。

function FirstBlog() {
  return <h1>ブログの最初の記事です</h1>;
}

export default FirstBlog;

4. 動的ルーティングで柔軟にURLを作る

4. 動的ルーティングで柔軟にURLを作る

Next.jsでは角括弧を使うことで動的なルートを作れます。例えば pages/blog/[id].js とすると、URLの id 部分を変えて複数の記事に対応できます。

import { useRouter } from "next/router";

function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return <h1>ブログ記事ID: {id}</h1>;
}

export default BlogPost;

5. ネストした動的ルートの例

5. ネストした動的ルートの例

動的ルートはサブフォルダでも使えます。例えば pages/blog/[category]/[id].js とすると、カテゴリごとの記事ページを作れます。

import { useRouter } from "next/router";

function CategoryPost() {
  const router = useRouter();
  const { category, id } = router.query;

  return <h1>{category} の記事 {id} です</h1>;
}

export default CategoryPost;

6. Linkコンポーネントでページ遷移を簡単に

6. Linkコンポーネントでページ遷移を簡単に

Next.jsでは next/link の Link コンポーネントを使うことで、クリックだけで他のページに移動できます。

import Link from "next/link";

function Navigation() {
  return (
    <div>
      <Link href="/">ホーム</Link>
      <br />
      <Link href="/about">Aboutページへ</Link>
    </div>
  );
}

export default Navigation;

まとめ

まとめ

今回の記事では、Next.jsの自動ルーティングについて、初心者の方にもわかりやすく基本から応用までを解説しました。Next.jsでは、pagesフォルダに作成したファイルがそのままURLに対応するという特徴があります。トップページは index.js が自動でルート（/）に対応し、サブフォルダを作ることで階層的なルーティングが可能になります。また、角括弧を使った動的ルーティングを活用することで、複数の記事やページを柔軟に管理できます。さらに、 Link コンポーネントを使えば、クリック操作だけでページ間の遷移ができ、ユーザー体験を向上させることができます。

具体的なコード例として、通常の静的ページの作成、サブフォルダによる階層構造のルーティング、動的ルーティングの実装方法、さらにネストした動的ルートの作成方法を紹介しました。これにより、Next.jsでのページ設計やURL設計の基本的な考え方が理解できます。初心者の方でも、pagesフォルダの構造とファイル名の規則を守るだけで、複雑なルーティングを実現できる点が大きな魅力です。

また、動的ルーティングを使用することで、ブログ記事や商品詳細ページなど、IDやカテゴリに応じてURLを柔軟に生成できることを学びました。 useRouter フックを使うことで、URLパラメータを簡単に取得でき、画面に表示することができます。さらに、 Link コンポーネントを活用することで、ページ間の遷移を効率的に実装でき、ユーザーインターフェースをシンプルに保つことが可能です。

まとめとして、Next.jsの自動ルーティングの特徴を整理すると、①pagesフォルダに作成したファイルが自動でURLに対応、②index.jsはルート（/）に自動対応、③サブフォルダで階層的なURL構造が作れる、④角括弧を使った動的ルーティングで柔軟に対応、⑤Linkコンポーネントでページ遷移が簡単、というポイントがあります。これらを組み合わせることで、Next.jsで効率的にページ設計を行い、管理しやすいアプリケーションを構築できます。

次に、Reactを使った簡単なサンプルコードを紹介します。これはNext.jsのページにリンクを組み込んで、クリックでメッセージを変更する例です。

import React, { useState } from "react";
import Link from "next/link";

function Sample() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリックしてみよう
      </button>
      <div className="mt-3">
        <Link href="/about">Aboutページへ移動</Link>
      </div>
    </div>
  );
}

export default Sample;