将分页添加到 Next.js 和 Sanity.io 页面

如前所述,我想在从 Sanity 获取数据的页面上添加分页。我正在使用 getStaticProps 获取数据,并且我知道 getStaticProps 在构建时有效,那么如何添加分页?我应该预建页面吗?

我的代码如下所示:

export const getStaticProps = async () => {
  const textures = await clientSanity.fetch(`*[_type == "texture"] | order(publishedAt desc){
      _id,
      title,
      'slug': slug.current,
      mainImage{asset->{_id, url}},
  }`);
  const categories = await clientSanity.fetch(`*[_type == "category"] | order(title asc){
      _id,
      title,
      'slug': slug.current,
  }`);

  return {
    props: {
      textures,
      categories,
    },
  };
};

我真的不知道从哪里开始。

stack overflow Add pagination to Next.js & Sanity.io page
原文答案

答案:

作者头像

对于分页提要(在同一页面上加载更多项目),我遵循的模式是使用 SSG 加载初始 CMS 负载,然后在客户端进行分页。

可以在此处找到 SSR 的快速示例: https://codesandbox.io/s/muddy-snow-bguux?file=/pages/index.js

should 也适用于 SSG。

作者头像

Pagination - 以防有人不明白它到底是什么。

在您的示例中,您正在获取所有 texturescategories 服务器端。使用这种方法,您不必分页,因为您已经加载了所有数据。理智计费会爱你。

Sanity 已经有一个非常可靠的 documentation on pagination ,您可以继续学习。但简而言之。

将你从服务器获得的物品限制为 10 个:

*[_type == "texture"] | order(publishedAt desc) [0...10]
*[_type == "category"] | order(title asc) [0...10]

存储最后一项的 _id 并调用此查询客户端:

*[_type == "texture" && _id > $lastTextureId] | order(_id) [0...20] {
  _id, title, body
}
*[_type == "category" && _id > $lastCategoryId] | order(_id) [0...20] {
  _id, title, body
}