🚀

【Next.js和訳】Routing/Introduction

2021/10/02に公開

Next.js

tech

この記事について

この記事は、Routing/Introductionの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

ルーティング

Next.js には、ページの概念に基づいたファイルシステムベースのルーティングがあります。

ファイルがpagesディレクトリに追加されると、自動的にルートとして利用できるようになります。

pagesディレクトリ内のファイルは、一般的なパターンを定義するために使用できます。

インデックスルート

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

pages/index.js → /
pages/blog/index.js → /blog

入れ子のルート

ルータは、入れ子になったファイルをサポートしています。ネストしたフォルダ構造を作成しても、ファイルは同じように自動的にルーティングされます。

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

ダイナミックルートのセグメント

ダイナミックセグメントにマッチさせるには、ブラケット構文を使用します。これにより、名前付きのパラメーターにマッチさせることができます。

pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
pages/[username]/settings.js → /:username/settings (/foo/settings)
pages/post/[...all].js → /post/* (/post/2020/id/title)

ページ間のリンク

Next.js のルーターでは、シングルページのアプリケーションのように、クライアントサイドでページ間のルート遷移を行うことができます。

このクライアントサイドのルート遷移を行うために、Linkという React コンポーネントが用意されています。

import Link from "next/link"

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
      <li>
        <Link href="/blog/hello-world">
          <a>Blog Post</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home

上の例では、複数のリンクがあり、それぞれが既知のページへのパス（href）をマッピングしています。

/ → pages/index.js
/about → pages/about.js
/blog/hello-world → pages/blog/[slug].js

静的生成を使用しているページでは、ビューポート内（初期状態またはスクロール中）にある<Link />は、対応するデータを含めて、デフォルトでプリフェッチされます。サーバーサイドレンダリングされたルートに対応するデータはプリフェッチされません。

ダイナミックパスへのリンク

補間を使用してパスを作成することもできます。これは、動的ルートセグメントに便利です。例えば、コンポーネントに prop として渡された投稿のリストを表示するには、次のようにします。

import Link from "next/link"

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link href={`/blog/${encodeURIComponent(post.slug)}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

また、URL オブジェクトを使用する方法もあります。

import Link from "next/link"

function Posts({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link
            href={{
              pathname: "/blog/[slug]",
              query: { slug: post.slug },
            }}
          >
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  )
}

export default Posts

ここでは、パスの作成に補間を使用する代わりに、href に URL オブジェクトを使用しています。

pathnameはpagesディレクトリ内のページの名前です。この例では、/blog/[slug]です。
queryはダイナミックセグメントを持つオブジェクトです。この場合はslugです。

ルーターの挿入

例

Dynamic Routing

React コンポーネントでrouterオブジェクトにアクセスするには、useRouterまたはwithRouterを使用できます。

一般的には useRouter を使うことをお勧めします。

詳細はこちら

ルーターは複数のパーツに分かれています。

Discussion

ログインするとコメントできます