Next.jsのRouting入門！React Routerとの違いを初心者でもわかる解説

1. Next.jsのRoutingはファイルベース

1. Next.jsのRoutingはファイルベース

Next.jsでは、プロジェクトのpagesフォルダに作ったファイルがそのままURLになります。例えば、pages/about.jsを作ると、自動で/aboutというURLでアクセス可能です。

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

export default About;

2. 動的ルーティングでURLに変数を渡す

2. 動的ルーティングでURLに変数を渡す

Next.jsではブラウザのURLに応じて内容を変える動的ルーティングも簡単にできます。例えば、pages/posts/[id].jsという名前にすると、/posts/1や/posts/2に応じてページを切り替えられます。

import { useRouter } from "next/router";

function Post() {
  const router = useRouter();
  const { id } = router.query;
  return <h1>投稿ID: {id}</h1>;
}

export default Post;

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

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

Next.jsでは、リンクをクリックしてページを遷移する際にLinkコンポーネントを使います。通常のHTMLの<a>タグよりも高速で遷移できる特徴があります。

import Link from "next/link";

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

export default Home;

4. React Routerとの違いを整理しよう

4. React Routerとの違いを整理しよう

React Routerはルートを} />のように自分で設定します。Next.jsはファイルを作るだけでURLが決まるので設定の手間が少なく、初心者でも扱いやすいです。

// React Router例
import { BrowserRouter, Routes, Route } from "react-router-dom";
import About from "./About";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

5. ネストされたページで階層的なURLを作る

5. ネストされたページで階層的なURLを作る

Next.jsではフォルダを作ることでネストされたURLが自動で生成されます。例えば、pages/blog/first.jsを作ると、/blog/firstにアクセス可能です。

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

export default FirstBlog;

6. APIルートを作ってデータを取得する

6. APIルートを作ってデータを取得する

Next.jsではpages/apiにファイルを作るとサーバー側のAPIとして動作します。これによりRoutingとデータ取得を簡単に組み合わせられます。

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

7. getStaticPropsとgetServerSidePropsで事前データ取得

7. getStaticPropsとgetServerSidePropsで事前データ取得

Next.jsでは静的生成とサーバーサイド生成を簡単に使えます。getStaticPropsはビルド時にデータを取得、getServerSidePropsはリクエスト時にデータを取得します。

export async function getStaticProps() {
  return { props: { title: "静的ページ" } };
}

function StaticPage({ title }) {
  return <h1>{title}</h1>;
}

export default StaticPage;

8. Routerイベントでページ遷移を監視する

8. Routerイベントでページ遷移を監視する

Next.jsのuseRouterを使うとページ遷移のイベントを監視して、処理を追加できます。例えば、ロード中のスピナー表示などに使えます。

import { useRouter } from "next/router";
import { useEffect } from "react";

function App() {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url) => {
      console.log("Navigating to:", url);
    };
    router.events.on("routeChangeStart", handleRouteChange);
    return () => {
      router.events.off("routeChangeStart", handleRouteChange);
    };
  }, [router.events]);

  return <h1>ページ遷移をコンソールで確認できます</h1>;
}

export default App;

まとめ

まとめ

今回の記事では、Next.jsのRoutingの基本から応用までを詳しく解説しました。Next.jsのRoutingはファイルベースであるため、React Routerのように手動でルートを設定する必要がなく、初心者でも簡単にページ遷移を実装できます。

ファイルをpagesフォルダに作るだけで自動的にURLが割り当てられ、さらにフォルダ構造を工夫することでネストされた階層的なURLも簡単に生成できます。これにより、ブログやECサイトのカテゴリページなど、階層構造の多いサイト構築もスムーズに行えます。また、動的ルーティングではURLに応じてページ内容を切り替えられるので、投稿IDや商品IDの表示なども簡単に実装できます。

Linkコンポーネントを使用することで、ページ遷移時にブラウザ全体のリロードを避け、高速でユーザー体験を向上させることも可能です。さらに、getStaticPropsやgetServerSidePropsを利用することで、事前にデータを取得した静的ページ生成や、リクエストに応じたサーバーサイド生成を簡単に行えます。これによりSEO対策やページ表示速度の最適化も可能になります。

APIルートをpages/apiに作成すれば、サーバー側でデータを取得する仕組みも同時に組み込めるため、フロントとバックエンドの統合が容易になります。さらに、useRouterを使ったRouterイベントの監視により、ページ遷移時の処理やスピナー表示、ログの記録など、ユーザー体験の向上にも貢献します。

Next.jsのRoutingはReact Routerと比べて設定の手間が少なく、ページ追加やURL管理が直感的でわかりやすいため、初心者でもすぐに活用できます。また、ネスト構造や動的ルーティング、Linkコンポーネントの使用法、APIルートの作成、静的生成とサーバーサイド生成の活用、Routerイベント監視など、豊富な機能を組み合わせることで、実務レベルのWebサイト構築が可能になります。

次に、簡単なサンプルプログラムを使って、Next.jsのRoutingの基本を確認してみましょう。

import Link from "next/link";

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

export default Home;

import { useRouter } from "next/router";

function Post() {
  const router = useRouter();
  const { id } = router.query;
  return <h1>投稿ID: {id}</h1>;
}

export default Post;