オタクくん「ギャル先輩、page routerとapp routerの違いが知りたいです。」

オタクくん「ギャル先輩、page routerとapp routerの違いが知りたいです。」

ギャル先輩「おっと、page routerとapp routerね〜。それ、Next.jsのルーティングの話だね。じゃ、基本から教えてあげるよ〜」

Next.jsのルーティングの基本

ギャル先輩「まず、Next.jsではページベースのルーティングが基本なんだよね。ファイルシステムに基づいてルーティングが自動的に設定されるんだよ。」

オタクくん「ページベースのルーティングって、具体的にはどういうことですか？」

ギャル先輩「こんな感じだよ〜」

// pages/index.js
export default function Home() {
  return <h1>Home Page</h1>;
}

// pages/about.js
export default function About() {
  return <h1>About Page</h1>;
}

ギャル先輩「これで、/にアクセスするとHomeコンポーネントが、/aboutにアクセスするとAboutコンポーネントが表示されるんだよ〜」

オタクくん「なるほど、ファイル名がそのままルートになるんですね！」

page routerとは？

ギャル先輩「じゃ、次にpage routerについて詳しく説明するよ〜。page routerは、Next.jsのデフォルトのルーティング方式で、上で説明したように、ファイルシステムに基づいてルーティングが自動で設定されるんだよ。」

オタクくん「page routerの特徴は何ですか？」

ギャル先輩「特徴はこんな感じかな〜」

1. ファイルベースのルーティング：ファイル名がそのままURLパスになる。
2. 動的ルーティング：ファイル名にブラケットを使って動的パラメータを設定できる。
3. 自動コード分割：各ページが自動的に分割され、必要なときにだけ読み込まれる。

// pages/post/[id].js
import { useRouter } from 'next/router';

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

  return <h1>Post: {id}</h1>;
}

ギャル先輩「こんな感じで、[id].jsってファイルを作ると、/post/1とか/post/2みたいなURLに対応できるんだよ〜」

app routerとは？

オタクくん「次にapp routerについて教えてください！」

ギャル先輩「おっけー、app routerはNext.jsの新しいルーティング方式なんだ。これを使うと、ルートの設定をもっと柔軟にカスタマイズできるんだよ。」

オタクくん「app routerの特徴は何ですか？」

ギャル先輩「特徴はこんな感じだよ〜」

1. 柔軟なルーティング：ルートをプログラムで設定できるので、複雑なルーティングにも対応可能。
2. ネストされたルーティング：ネストされたルートを簡単に設定できる。
3. データフェッチの柔軟性：ルートごとにデータフェッチのロジックをカスタマイズできる。

// src/routes.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Post from './pages/Post';

function AppRouter() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/post/:id" component={Post} />
      </Switch>
    </Router>
  );
}

export default AppRouter;

ギャル先輩「こんな感じで、自分でルーティングの設定をカスタマイズできるんだよ〜」

どちらを選ぶべきか？

オタクくん「page routerとapp router、どっちを使うべきなんですか？」

ギャル先輩「それはプロジェクトの要件次第だね〜。シンプルなサイトならpage routerで十分だけど、複雑なルーティングが必要ならapp routerを使うといいよ〜」

オタクくん「なるほど、要件に応じて使い分けるんですね！」

まとめ

オタクくん「ギャル先輩、本当にありがとうございました！これでpage routerとapp routerの違いがよくわかりました！」

ギャル先輩「ふふん、どういたしまして〜。てーか、あーしの教え方、わかりやすかったっしょ？www」

オタクくん「はい、本当に助かりました！ギャル先輩、すごいです！」

ギャル先輩「もっと聞きたいことがあったら、いつでも聞いてね〜。じゃ、次はどんな質問してくれるかな？www」

オタクくん「うーん、また困ったときにお願いします…（ギャル先輩、実はすごく優しいんだな…）」