実装するもの

まずは実装するものを見ていただくのが良いのかなと思います。

これは本ブログのトップページで実装済みです。こちらのStorybookのほうが見やすいかもしれません。

様々なブログでも実装されているUIですので、Webを探せば実装方法はたくさん紹介されています。ただ、このような省略メニュー付きのページネーションは珍しいのかなと思い、本記事を書き起こしました。

実装の詳細

コードだけ教えてくれ！というかたは、下記のファイルをご覧ください！

詳細を説明していきます。

const rate = totalCount / PER_PAGE;
const totalPages = rate < MINIMUM_PAGE_COUNT ? MINIMUM_PAGE_COUNT : Math.ceil(rate);

ここで、rateは総アイテム数を1ページあたりのアイテム数で割った値です。totalPagesは、rateが1未満の場合は1、そうでなければrateを切り上げた値です。ここでは総ページ数を計算しています。例えば 20(記事数) ÷ 4 (記事数 / page) = 5 (page) となります。

次に、前後のページ範囲を計算します。smallNumRangeは現在のページより前のページ番号のリスト、largeNumRangeは現在のページより後のページ番号のリストです。

const previousPageRange = useMemo(() => Array.from({ length: totalPages + INDEX_OFFSET })
    .map((_, index) => index + INDEX_OFFSET)
    .slice(SMALL_RANGE_START_OFFSET, currentPage - SMALL_RANGE_END_OFFSET), [currentPage, totalPages])
const nextPageRange = useMemo(() => Array.from({ length: totalPages + INDEX_OFFSET })
    .map((_, index) => index + INDEX_OFFSET)
    .slice(currentPage + LARGE_RANGE_START_OFFSET, totalPages - LARGE_RANGE_END_OFFSET), [currentPage, totalPages])

なぜ SMALL_RANGE_END_OFFSET, LARGE_RANGE_END_OFFSET が必要なのか？

previousPageRange とnextPageRangeの計算において、sliceメソッドで -1 (SMALL_RANGE_END_OFFSET)を使用しています。これには以下の理由があります。

slice(SMALL_RANGE_START_OFFSET, currentPage - SMALL_RANGE_END_OFFSET) の currentPage - SMALL_RANGE_END_OFFSET は、現在のページの1つ前までのページを取得するためです。例えば、現在のページが5の場合、previousPageRangeは 2, 3 になります。(Storybookでいうとココです！)

slice(currentPage + LARGE_RANGE_START_OFFSET, totalPages - LARGE_RANGE_END_OFFSET) は、現在のページの次のページから最後のページの1つ前までのページを取得するためです。例えば、現在のページが5で、総ページ数が10の場合、nextPageRangeは 7, 8, 9 になります。

最初のページボタン

最初のページ（ページ番号1）

<li>
  <PaginationItem pageNumber={1} currentPage={currentPage}>1</PaginationItem>
</li>

前のページボタン

現在のページが1でない場合、前のページに移動するボタン

<li>
          <PaginationItem pageNumber={currentPage - 1} currentPage={currentPage}>
            <svg
              className="-scale-x-90"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            >
              <path d="m9 18 6-6-6-6" />
            </svg>
          </PaginationItem>
        </li>

省略記号と小さいページ範囲のMenu

現在のページが4以上の場合、省略記号と小さいページ範囲のMenuを表示します。

{currentPage >= 4 && (
  <li className="relative group mx-6">
    <button type="button">
      <span>...</span>
    </button>
    <EllipsisMenu range={smallNumRange} />
  </li>
)}

EllipsisMenuについては下記のファイルを参照してください。

前のページボタン

現在のページが3以上の場合、前のページを表示。

{currentPage >= 3 && (
  <li>
    <PaginationItem pageNumber={currentPage - 1} currentPage={currentPage}>
      {currentPage - 1}
    </PaginationItem>
  </li>
)}

現在のページボタン

現在のページが最初と最後のページでない場合、現在のページを表示。

{currentPage !== 1 && currentPage !== totalPages && (
  <li>
    <PaginationItem pageNumber={currentPage} currentPage={currentPage}>
      {currentPage}
    </PaginationItem>
  </li>
)}

次のページボタン

現在のページが最後のページでない場合、次のページを表示。

{currentPage < totalPages && currentPage + 1 !== totalPages && (
  <li>
    <PaginationItem pageNumber={currentPage + 1} currentPage={currentPage}>
      {currentPage + 1}
    </PaginationItem>
  </li>
)}

省略記号と大きなページ範囲のMenu

現在のページが最後のページの3ページ前以下の場合、省略記号とその後のページ範囲を表示。

{currentPage <= totalPages - 3 && (
  <li className="relative group mx-6">
    <button type="button">
      <span>...</span>
    </button>
    <EllipsisMenu range={largeNumRange} />
  </li>
)}

最後のページボタン

総ページ数が1でない場合、最後のページを表示します。

{totalPages !== 1 && (
  <li>
    <PaginationItem pageNumber={totalPages} currentPage={currentPage}>
      {totalPages}
    </PaginationItem>
  </li>
)}

次のページボタン

現在のページが最後のページでない場合、次のページに移動するボタンを表示。

{currentPage !== totalPages && (
  <li>
    <PaginationItem pageNumber={currentPage + 1} currentPage={currentPage}>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <path d="m9 18 6-6-6-6" />
      </svg>
    </PaginationItem>
  </li>
)}

以上です！より良い方法があれば教えてください〜

最後まで読んでいただきありがとうございます！

気ままにつぶやいているので、気軽にフォローをお願いします！🥺

ユーザーが勝手に/api/**（Route Handler）にアクセスできないようにするためには何をするのが標準なんでしょうか？（Next.jsの話）どこかにsecretsを持たせるとか？🤔
— りょた@dev (@Ryo54388667) December 9, 2023