Next.js Page Router まとめ【Routing】 #Next.js

この記事はNext.js Page Routerのドキュメントの自分用のメモ・まとめです。
今回は【Routing】の「Pages and Layouts」「Dynamic Routes」「Linking and Navigating」の章についてのまとめです。

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

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

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

Linking and Navigating

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

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

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

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

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