ページネーション
Previous / Next Pagination
Two step links either side of a live "Page 3 of 10" readout.
#pagination#prev-next#minimal
6 個のフレームワーク初級
Loading…
A numbered page strip that collapses long runs to an ellipsis.
<!--
Page 1 of 10, so Previous has nowhere to go. An anchor with no href is not
focusable and exposes no link role - which is the closest an <a> gets to a
disabled <button> - and aria-disabled tells a screen reader why it is inert
rather than leaving it to be silently skipped.
The ellipsis is aria-hidden: the numbers on either side of it already say
pages were skipped, and "horizontal ellipsis" read aloud between 4 and 10 is
noise, not information.
-->
<nav class="pager" aria-label="Pagination">
<ul class="pager__list">
<li><a class="pager__link pager__link--disabled" aria-disabled="true">Previous</a></li>
<li><a class="pager__link pager__link--current" href="?page=1" aria-current="page">1</a></li>
<li><a class="pager__link" href="?page=2">2</a></li>
<li><a class="pager__link" href="?page=3">3</a></li>
<li><span class="pager__ellipsis" aria-hidden="true">…</span></li>
<li><a class="pager__link" href="?page=10">10</a></li>
<li><a class="pager__link" href="?page=2">Next</a></li>
</ul>
</nav>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
currentPage必須 | number | - | 現在のページ番号（1 から開始）。 |
totalPages必須 | number | - | 全ページ数。 |
buildHref必須 | (page: number) => string | - | ページ番号から URL を生成します。ページを実際のリンクとして保つためのものです。 |
siblingCount | number | 1 | 現在のページの両側に表示するページ番号の数。 |
ariaLabel | string | 'Pagination' | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The piece worth keeping is that every page is an `<a href>`. Pagination is navigation, and an anchor is what makes page 7 bookmarkable, middle-clickable into a new tab, crawlable, and reachable with JavaScript off - a `<button>` calling `router.push` looks identical and quietly loses all four. Because the page number lives in the URL rather than in state, the Next.js tab is a Server Component and ships no JavaScript at all; swap `<a>` for `<Link>` if you want client-side transitions. `pageRange` returns a union of numbers and gap markers rather than sentinel values like `-1`, which is what stops a gap ever being rendered as a link to page NaN. Tune `siblingCount` for how many pages flank the current one; the ellipsis stays `aria-hidden` because the numbers either side of it already say pages were skipped.