NextJS 中的静态分页

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

如果您真的想将查询参数用于分页（类似/foo?page=2）和 SSG，我刚刚想出了一个解决方法。

您可以使用 Next JSrewrites和redirects功能。

首先，使用/foo/[page].js文件格式并静态生成所有页面，正如hangindev.com 解释的那样。

然后，在next.config.js文件中，您必须导出两个函数：
async redirects()和async rewrites().

module.exports = {

  ....

  async redirects() {

    return [

      {

        source: "/foo/1",

        destination: "/foo?page=1",

        permanent: true,

      },

      {

        source: "/foo/2",

        destination: "/foo?page=2",

        permanent: true,

      },

      {

        source: "/foo/3",

        destination: "/foo?page=3",

        permanent: true,

      },

    ];

  },

  async rewrites() {

    return [

      {

        source: "/foo",

        has: [{ type: "query", key: "page", value: "1" }],

        destination: "/foo/1",

      },

      {

        source: "/foo",

        has: [{ type: "query", key: "page", value: "2" }],

        destination: "/foo/2",

      },

      {

        source: "/foo",

        has: [{ type: "query", key: "page", value: "3" }],

        destination: "/foo/3",

      },

    ];

  },

  

};

该redirects()功能确保用户无法看到/foo/2格式的页面，因为他们被重定向到/foo?page=2. 该rewrites()函数显示URL的/foo/2页面内容。/foo?page=2

Answer 2

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

您可以做的一件事是不要将页面编号放在查询中，而是将其作为路由参数，即用户将访问/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文档getStaticPaths中了解更多信息。getStaticProps