Next.js Page Router まとめ【Routing】

この記事はNext.js Page Routerのドキュメントの自分用のメモ・まとめです。
今回は【Routing】の「[Pages and Layouts](https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts)」「[Dynamic Routes](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes)」「[Linking and Navigating](https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating)」の章についてのまとめです。

https://nextjs.org/docs/pages/building-your-application/routing

## Pages and Layouts

https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts

Next.jsでは、ページはpagesディレクトリの.js、.jsx、.ts、.tsxファイルからエクスポートされたReactコンポーネントです。各ページは、ファイル名に基づいてルートに関連付けられます。

例以下のようなReactコンポーネントをエクスポートしたpages/about.jsを作成すると、`/about`からアクセスできるようになります。

```pages/about.js
export default function About() {
  return <div>About</div>
}
```

### index Route

indexという名前のファイルは自動的にディレクトリのルートにルーティングします。

- `pages/index.js` → `/`
- `pages/blog/index.js` → `/blog`

### Nested Route

ネストされたフォルダ構造を作成した場合でも、ファイルは自動的に同じ方法でルーティングされます。

- `pages/blog/first-post.js` → `/blog/first-post`
- `pages/dashboard/settings/username.js` → `/dashboard/settings/username`

### Pages with Dynamic Routes

動的なルートを持つページを「ダイナミックルーティング」と呼びます。
pages/posts/[id].jsというファイルを作成すると、`posts/1`や`posts/2`などにアクセスできるようになります。

### Layout Pattern

複数のページで共通のレイアウトを使用する際に、特定のコンポーネント内に共通の要素（例: ナビゲーションバー、フッターなど）を含め、ページコンポーネントがそのレイアウト内にレンダリングされるようにします。

```components/layout.js
import Navbar from './navbar'
import Footer from './footer'
 
export default function Layout({ children }) {
  return (
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}
```

### Single Shared Layout with Custom App



下記はカスタム App コンポーネントを使用して、単一の共有レイアウトをアプリケーション全体で使用する例です。

```pages/_app.js
import Layout from '../components/layout'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}
```

上記の例では、MyApp コンポーネントが Next.js のカスタム App コンポーネントです。このコンポーネントでは、Layout コンポーネントでアプリケーション全体をラップしています。Component プロパティは各ページコンポーネントを指します。

Layout コンポーネントの定義は以下の通りです:

```components/layout.js

import Navbar from './Navbar';
import Footer from './Footer';

function Layout({ children }) {
  return (
    <div>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </div>
  );
}

export default Layout;
```

ここでは、共有のレイアウト要素として Navbar コンポーネントと Footer コンポーネントを含んだ Layout コンポーネントを定義しています。

これにより、アプリケーション全体で共通のレイアウトが使用され、各ページが同じ外観と感覚を共有できるようになります。また、ページの切り替え時にコンポーネントの状態が保持されるため、ユーザーが入力した情報などが失われることはありません。

### Dynamic Routes

https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes

`blog/1`,`blog/2`など、動的セグメントからルートを作成したい場合は、Dynamic Routes(動的ルーティング)を使用できます。

動的な部分をかぎ括弧`[]`で囲むことで作成できます。


### Linking and Navigating

https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating



Next.jsでは、aタグを使用して画面遷移する際、Linkタグを使用します。
なぜ<Link>タグを使用するのか、それはNext.jsは **「プリロード機能」** があるためです。


プリロード機能: <Link>を使用すると、Next.jsはリンク先のページを事前に取得し、キャッシュしておくことができます。これにより、ユーザーがリンクにアクセスする際にページが迅速に表示されるようになります。これは、ユーザーがページ間を移動する際の速度とパフォーマンスを向上させます。

単純なaタグでは、ブラウザは通常のページ遷移を行い、新しいページのコンテンツをサーバーから取得します。これにより、ページ遷移時には常にサーバーから新しいページを取得するため、遅延が発生する可能性があります。

一方、<Link>コンポーネントを使用すると、Next.jsはクライアントサイドのナビゲーションを行い、事前にページをプリレンダリングしておくことができます。これにより、ページ遷移がより迅速でスムーズになり、ユーザーエクスペリエンスが向上します。

つまり、<Link>コンポーネントを使用することで、Next.jsはページ遷移をプリレンダリングによって最適化し、より高速で応答性の高いアプリケーションを提供することができます。