如何在 NextJS 中自定义分页？

在 NextJS 中，使用分页功能可以让我们方便地展示大量数据，提升用户体验。但是默认的分页样式可能不符合我们的需求，那么如何在 NextJS 中自定义分页呢？下面我们将介绍一些基本的方法和技巧。

基本分页

NextJS 内置了 getStaticProps 和 getStaticPaths 这两个方法，可以轻松地实现分页。我们通过在 getStaticPaths 中返回一个数组，将不同页数的路径传入。

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const totalPages = getTotalPages(posts);

  const paths = Array.from({ length: totalPages }, (_, i) => ({
    params: { page: `${i + 1}` },
  }));

  return {
    paths,
    fallback: false,
  };
}

在 [page].js 这个动态路由页面中，我们可以通过 getStaticProps 生成对应的数据，和解析出当前页码。具体实现可以根据自己的需求来定制。

export async function getStaticProps({ params }) {
  const page = parseInt(params.page, 10) || 1;
  const posts = await getPostsForPage(page);

  return {
    props: {
      posts,
      currentPage: page,
    },
  };
}

自定义样式

NextJS 中的默认分页样式可能不能满足我们的需求，可通过 CSS 来自定义样式。我们通过使用 className 属性来针对每个元素进行样式调整。

<div className="pagination">
  {Array.from({ length: totalPages }, (_, i) => {
    const page = i + 1;
    const isCurrentPage = page === currentPage;

    return (
      <Link href={`/posts/page/${page}`} key={page}>
        <a className={isCurrentPage ? "active" : ""}>{page}</a>
      </Link>
    );
  })}
</div>

分页器算法

对于大量数据的分页实现，我们可能需要更复杂的算法。最常见的分页算法是 “分块算法”，通俗地说就是将数据分成若干块，便于展示和快速导航。

function getPagination(totalCount, pageSize, currentPage) {
  const halfCount = Math.floor(pageSize / 2);
  const totalPage = Math.ceil(totalCount / pageSize);

  let start = Math.max(currentPage - halfCount, 1);
  let end = Math.min(start + pageSize - 1, totalPage);

  const remain = pageSize - (end - start + 1);
  if (remain > 0) {
    start = Math.max(start - remain, 1);
  }

  const items = Array.from({ length: end - start + 1 }, (_, i) => {
    const number = start + i;
    const isCurrentPage = number === currentPage;
    return { number, isCurrentPage };
  });

  return {
    currentPage,
    items,
    totalPages: totalPage,
  };
}

这个算法实现了基本的分块算法，可以根据自己的需求进行调整和优化。

总结

在 NextJS 中实现自定义分页可以通过以下几个步骤：

1. 实现基本的 getStaticProps 和 getStaticPaths 方法，生成不同页数的路径和数据。
2. 根据需求自定义分页样式，通过 className 来针对每个元素进行样式调整。
3. 针对大数据量的需求，考虑实现复杂算法，使得分页更高效、更方便导航。

以上就是如何在 NextJS 中自定义分页的介绍，希望对你有所帮助。