ルーティング

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>
    </ul>
  );
}

export default Home;

動的なパスセグメントでリンクするとき、ルータがどの JavaScript ファイルを読む込むのかが分かるように、 href と as を渡す必要があります。

href - pages ディレクトリ中のページの名前です。例えば /blog/[slug] のようにします。
as - ブラウザに表示される URL です。以下の例では /blog/hello-world になります。

import Link from 'next/link';

function Home() {
  return (
    <ul>
      <li>
        <Link href="/blog/[slug]" as="/blog/hello-world">
          <a>To Hello World Blog post</a>
        </Link>
      </li>
    </ul>
  );
}

export default Home;

as プロパティも動的に生成できます。プロパティとしてページに渡されたポストのリストを表示する時は次のようになります:

function Home({ posts }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>
          <Link href="/blog/[slug]" as={`/blog/${post.slug}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </ul>
  );
}