Next.jsにUIコンポーネントはあるの? | Next.js にページネーション用コンポーネントはある？

✅ 結論

質問	回答
Next.jsにページネーション専用コンポーネントはある？	❌ ありません（UI部品は提供していない）
Antdを使わないとページネーションできない？	❌ 必要なし。自作や他ライブラリでも可能

🧠 理由

Next.js はルーティングやSSR/SSGなどアプリ構築の基盤を提供するフレームワークであり、UIコンポーネント（ボタンやページネーションなど）は自前で用意するか、UIライブラリを使う必要があります。

✅ ページネーションの選択肢

方法	特徴
Ant Design (Antd)	高機能・デザイン済みで楽に導入可
自作	完全自由・軽量・Tailwindとの相性良し
他のUIライブラリ	MUI, Bootstrapなど
ヘッドレスライブラリ	react-paginate などロジック専用

✅ 自作ページネーションの最小例（Tailwind対応）

'use client';

import { useState } from 'react';

const items = Array.from({ length: 50 }, (_, i) => `アイテム ${i + 1}`);
const itemsPerPage = 10;

export default function Page() {
  const [page, setPage] = useState(1);
  const totalPages = Math.ceil(items.length / itemsPerPage);

  const start = (page - 1) * itemsPerPage;
  const visibleItems = items.slice(start, start + itemsPerPage);

  return (
    <div className="p-4">
      <ul className="mb-4 space-y-1">
        {visibleItems.map((item, i) => (
          <li key={i} className="p-2 bg-white shadow rounded">{item}</li>
        ))}
      </ul>

      <div className="flex gap-2">
        <button onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}>← 前へ</button>
        <span>ページ {page} / {totalPages}</span>
        <button onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page === totalPages}>次へ →</button>
      </div>
    </div>
  );
}

✅ Ant Design（Antd）を使う例

import { Pagination } from 'antd';

export default function Page() {
  const onChange = (page: number) => {
    console.log('選択されたページ:', page);
  };

  return <Pagination defaultCurrent={1} total={50} pageSize={10} onChange={onChange} />;
}

✅ まとめ

使い方	備考
自作	最も自由で軽量。Tailwindと相性抜群
Ant Design	短時間で見た目も整ったUIが作れる
react-paginateなど	ロジックだけ任せて、デザインは自由にできる

📌 応用したいときは？

?page=2 のようなクエリパラメータでルーティングしたい
APIからデータを取得してページごとに表示したい
詳細ページへのリンクを含めたい

そのような構成もNext.jsで柔軟に対応できます。必要であれば応用サンプルも作成できます！