概要

サーバーコンポーネントでページネーションを実装するためのクエリ文字列

?page=1

useSearchParams

実装方法

page.tsx のオプション引数

searchParams

// 1ページ当たりのデータ数
const POSTS_PER_PAGE = 10;

export default async function Page({
  searchParams,
}: {
  searchParams: { page: string };
}) {
  // ページ番号取得
  const page = parseInt(searchParams.page ?? '1');

  // GETリクエスト
  const res = await fetch(
    `${process.env.BACKEND_URL}/api/posts?page=${page}&limit=${POSTS_PER_PAGE}`,
    {
      cache: 'no-store',
    }
  );

  // レスポンスデータ処理
  // ...

  // データ数を取得
  totalPosts = // ...

  // ナビゲーションのリンク数
  const totalPages = Math.ceil(totalPosts / POSTS_PER_PAGE);

  return (
    // 他のHTML要素

      {/* ページネーションナビゲーション */}
      <div className={styles.pagination}>
        {Array.from({ length: totalPages }, (_, index) => (
          <Link
            key={index}
            href={`/blog?page=${index + 1}`} // 他のページパスへ
            className={`${styles.pageLink} ${
              index + 1 === page ? styles.active : '' // 閲覧中のページ番号を目立たせる
            }`}
          >
            {index + 1}
          </Link>
        ))}
      </div>
  );
}

以下は公式ドキュメントからの引用。 Nest.js API Reference > File Conventions > page.js

export default function Page({
  params,
  searchParams,
}: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  return <h1>My Page</h1>;
}

params

ダイナミックルートパラメータを取得する場合に使用する。

• 例: （

  /posts/[id]

  から id を取得する

searchParams

クエリ文字列からキーと値を取得する場合に使用する。

• 例:

  /posts?page=1&limit=10

  から

  {page: '1', limit: '10'}

  を取得する

参考

• Nest.js API Reference > File Conventions > page.js
• Next.js API Reference > Functions > useSearchParams