Javascript NextJS中的静态分页

我试图在下一个JS中设置分页，但我不知道如何通过getStaticProps实现这一点。我可以通过带有查询参数的getServerSideProps来实现这一点，但这不能通过getStaticProps来实现。数据来自本地Strapi后端

下面是getServerSideProps的示例（它可以工作）：

}

然后我就把按钮挂在路由器上来回移动

onClick={() => router.push(`/?page=${page - 1}`)}

我需要访问与getServerSideProps中的查询参数类似的内容。 我所要求的是可以静态实现的吗

因为

getStaticProps

在构建时运行，所以它不接收数据 这仅在请求期间可用，例如查询参数 或HTTP头，因为它生成静态HTML。

您可以做的一件事是将页码作为路由参数，而不是放在查询中，即用户将访问

/3

，而不是

/？page=3

要实现此功能，您需要在

pages

目录中创建

[page].js

，并导出

getstaticpath

函数：

export async function getStaticPaths() {
  // query Strapi to calculate the total page number
  return {
    paths: [
      { params: { page: '1' } },
      { params: { page: '2' } },
      { params: { page: '3' } }
    ],
    fallback: true or false // See the "fallback" section in docs
  };
}

export async function getStaticProps(context) {
  const { page } = context.params;
  // fetch page data 
  return {
    props: { ... }, 
  }
}

还有一个

getStaticProps

函数：

export async function getStaticPaths() {
  // query Strapi to calculate the total page number
  return {
    paths: [
      { params: { page: '1' } },
      { params: { page: '2' } },
      { params: { page: '3' } }
    ],
    fallback: true or false // See the "fallback" section in docs
  };
}

export async function getStaticProps(context) {
  const { page } = context.params;
  // fetch page data 
  return {
    props: { ... }, 
  }
}

---

在Next.js中了解有关

getstaticpath

和

getStaticProps

的更多信息。

是否存在这样的情况：一个页面比另一个更有优势？但是如果我们不知道在构建时会有多少页面，我们该怎么办？如果有成吨的页面，我们当然不应该列举我们的路径