Question

我正在尝试在Next JS中设置分页，但是我无法弄清楚如何通过getStaticProps实现此功能。我可以通过带有查询参数的getServerSideProps来做到这一点，但这不能通过getStaticProps访问。数据来自本地Strapi后端。

以下是getServerSideProps的示例（有效）：

export async function getServerSideProps({ query: { page = 1 } }) {
const { API_URL } = process.env;

const start = +page === 1 ? 0 : (+page - 1) * 3;
const numberOfCakesRes = await fetch(`${API_URL}/cakes/count`);
const numberofCakes = await numberOfCakesRes.json();

const res = await fetch(`${API_URL}/cakes?_limit=3&_start=${start}`);
const data = await res.json();

return {
    props: {
        cakes: data,
        page: +page,
        numberofCakes,
    },
};

}

然后我只需将按钮挂在路由器上即可来回穿梭。

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

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

Answer 1

由于getStaticProps在构建时运行，因此无法接收数据仅在请求时间内可用，例如查询参数或HTTP标头，因为它会生成静态HTML。 docs

您可以做的一件事是，不要在查询中放入页面编号，而将其作为路由参数，即用户将访问/3而不是/?page=3。

要实现此目的，您需要在[page].js目录中创建一个pages并导出一个getStaticPaths函数：

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
  };
}

还有一个getStaticProps函数：

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

在Next.js docs中了解有关getStaticPaths和getStaticProps的更多信息。

NextJS中的静态分页

1 个答案: