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

【问题标题】：Add pagination to Next.js & Sanity.io page将分页添加到 Next.js 和 Sanity.io 页面
【发布时间】：2021-05-25 03:09:01
【问题描述】：

如上所述，我想在从 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,
    },
  };
};

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

【问题讨论】：

标签： next.js sanity

【解决方案1】：

对于分页供稿（在同一页面上加载更多项目），我遵循的模式是使用 SSG 加载初始 CMS 有效负载，然后在客户端进行分页。

可以在这里找到一个快速而肮脏的 SSR 示例：https://codesandbox.io/s/muddy-snow-bguux?file=/pages/index.js

这应该也适用于 SSG。

【讨论】：