ページネーション

04月26日に公開

インストール

shadcn add howler
bun add -D @types/howler

import Pagination from '@/app/_resources/recipes/paginate/pagination';
 
export default function Demo() {
  return <Pagination totalItems={1000} defaultItemsPerPage={25} delta={2} />;
}

解説

SSR に対応したページコンポーネント。ユーティリティ関数でページコンポーネント用のデータを生成し、shadcn/ui でスタイルを実装しています。

事前に shadcn/ui ドキュメントに沿って Pagination を Next.js の Link に対応させる必要があります。

関連リソース

Pagination - shadcn/ui