Next.jsを使用して、paramsを使った動的ルーティングとページネーションを組み合わせた実装を紹介します。
記事のデータを用意して、それぞれのページにうまく表示させていきます。
また、トップページはページ番号で言うと1になり、ルーティングは必要ないので固定するイメージで行なっていきます。

トップページ(1ページ目)

こちらが今回表示したいデータです。

// 仮データ
export const mockPosts = [
  { id: 1, title: 'Getting Started with Next.js' },
  { id: 2, title: 'Understanding App Router in Next.js 15' },
  { id: 3, title: 'Using Prisma with PostgreSQL' },
  { id: 4, title: 'Building a Blog with Markdown Support' },
  { id: 5, title: 'Adding Image Upload to Your Forms' },
  { id: 6, title: 'Implementing Tag Filtering' },
  { id: 7, title: 'Responsive Design with Tailwind CSS' },
  { id: 8, title: 'Authentication with next-auth' },
  { id: 9, title: 'Previewing Markdown in Real Time' },
  { id: 10, title: 'Deploying to Vercel' },
];

トップページから実装していきます。

// 1ページあたりのアイテムの数
export const POSTS_PER_PAGE = 5;

// 合計何ページ必要か計算
export const totalPages = Math.ceil(mockPosts.length / POSTS_PER_PAGE);

1ページあたり5つデータを表示するとしましょう。また、必要なページ数は全部で2ページになります。(Math.ceil()を使い、中の数字を切り上げます。今回は綺麗に割り切れてます。)

export default function Page() {
  // 1ページあたりに必要なアイテムの数だけsliceする
  const paginatedPosts = mockPosts.slice(0, POSTS_PER_PAGE);
  
  return (
    <div className="mx-auto">
      <div className="grid grid-cols-5 gap-4">
        {paginatedPosts.map(post => (
          <div key={post.id}>
            {post.title}
          </div>
        ))}
      </div>
      <div className="flex gap-4">
        {Array.from({ length: totalPages }).map((_, i) =>
          i === 0 ? (
            <span key={i} className="bg-blue-300 px-3 py-1 rounded">
              {i + 1}
            </span>
          ) : (
            <Link
              key={i}
              href={`/post/${i + 1}`}
              className="bg-blue-300 px-3 py-1 rounded"
            >
              {i + 1}
            </Link>
          )
        )}
      </div>
    </div>
  );
}

1ページ目なので、slice()で0番目からスタートすれば必要な数だけデータを取れます。そして実際に表示されるデータは、mockPosts[0]〜mockPosts[4]の5つになります。

次にルーティングの部分です。

ページ番号を表示するためtotalPagesを用いて、ページ数の合計を長さとする配列をArray.from()で作ります。今回は全部で2ページなので、長さが2の配列です。
<Link>コンポーネントの/post/${i + 1}で、ページ番号をパラメータとしてparamsを使えるようにルーティングします。

また、i === 0の時、つまり1ページ目の時はルーティングをさせたくないので(トップページのままでいいから)span要素を使って表示しています。

トップページの実装はとりあえずこのような感じです。

動的ルーティングページ

次に実際にこのページネーションで遷移されるページを実装していきます。
/post/[page]/page.tsxにコードを書いていきます。先に書いた/post/${i + 1}で表示されるページになります。

const Page = async ({ params }: Params) => {
  const { page: currentPage } = await params;

  // 1ページあたりに必要なデータだけ取得
  const paginatedPosts = mockPosts.slice(
    POSTS_PER_PAGE * (currentPage - 1),
    POSTS_PER_PAGE * currentPage
  );

  return (
    <div>
      <div>
        {paginatedPosts.map(post => (
          <div key={post.id}>
            <p>{post.title}</p>
          </div>
        ))}
      </div>
      <div>
        {Array.from({ length: totalPages }).map((_, i) => {
          const isActive = currentPage - 1 === i;
          if (i === 0) {
            return (
              <Link key={i} href="/">
                {i + 1}
              </Link>
            );
          }
          return isActive ? (
            <span key={i}>
              {i + 1}
            </span>
          ) : (
            <Link
              key={i}
              href={`/post/${i + 1}`}
            >
              {i + 1}
            </Link>
          );
        })}
      </div>
    </div>
  );
};

まずparamsから現在のページ番号(currentPage)を取得します。
そして1ページあたりに必要なデータだけslice()で取ります。

const paginatedPosts = mockPosts.slice(
  POSTS_PER_PAGE * (currentPage - 1),
  POSTS_PER_PAGE * currentPage
);

この式は少し複雑ですが、一般化された形になっています：

• 1ページ目（currentPage = 1）: slice(0, 5) → インデックス0〜4の記事
• 2ページ目（currentPage = 2）: slice(5, 10) → インデックス5〜9の記事

1ページあたりに表示したい記事数（POSTS_PER_PAGE）や、現在のページ番号が変わったとしても使える汎用的な式です。

次に先ほどと同じように配列を作ってページネーションを実装していきます。

const isActive = currentPage - 1 === i;

ページネーションの数字が現在のページ番号に等しい場合、ルーティングを行いたくないので後にこの式で分岐してspan要素を使います。

if (i === 0) {
  return (
    <Link key={i} href="/">
      {i + 1}
    </Link>
  );
}

i === 0の時つまりページ番号が1の時は、トップページに遷移させたいのでこのように条件分岐します。

次に2つ目の条件分岐です。
現在表示されているページ番号には、ルーティングをさせたくないのでこのように分岐させます。

return isActive ? (
  <span key={i}>{i + 1}</span>
) : (
  <Link key={i} href={`/post/${i + 1}`}>
    {i + 1}
  </Link>
);

2ページ目はこのように表示されてます。

まとめ

以上の方法で基本的なページネーションを動的ルーティングと組み合わせて実装できます。　
POSTS_PER_PAGEやデータの数を増やしたりするともっとわかりやすいと思います。
ぜひ皆さんも試してみて下さい。