如何在next.js里面用bootstrap5.3实现分页功能

要在 Next.js 中使用 Bootstrap 5.3 实现分页功能，您可以按照以下步骤进行操作：

1. 在 Next.js 项目中安装 Bootstrap 5.3。可以使用 npm 或者 yarn 命令进行安装：

npm install bootstrap@5.3

或

yarn add bootstrap@5.3

2. 在 Next.js 中创建一个分页组件。您可以在 `components` 文件夹下创建一个新的组件文件，例如 `Pagination.js`。

import Link from 'next/link';

export default function Pagination({ currentPage, totalPages }) {
  return (
    <nav aria-label="Page navigation">
      <ul className="pagination">
        {Array.from({ length: totalPages }, (_, i) => (
          <li className={`page-item ${i + 1 === currentPage ? 'active' : ''}`} key={i}>
            <Link href={`/?page=${i + 1}`}>
              <a className="page-link">{i + 1}</a>
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

3. 在页面组件中使用分页组件，并传递当前页数和总页数作为 props。

import { useRouter } from 'next/router';
import Pagination from '../components/Pagination';

export default function Home() {
  const router = useRouter();
  const { page } = router.query;
  const currentPage = page ? parseInt(page) : 1;
  const totalPages = 10; // 替换为实际的总页数

  return (
    <div>
      {/* 显示数据 */}
      {/* ... */}
      {/* 显示分页组件 */}
      <Pagination currentPage={currentPage} totalPages={totalPages} />
    </div>
  );
}

这样，您就可以在 Next.js 中使用 Bootstrap 5.3 实现分页功能了。注意替换 `totalPages` 的值为实际的总页数，并根据需要调整样式和其他参数。希望能对您有所帮助！