亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

NextJS 中的靜態分頁

NextJS 中的靜態分頁

BIG陽 2022-10-21 09:46:41
我正在嘗試在 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 中的查詢參數的東西。我要求的是靜態實現嗎?
查看完整描述

2 回答

?
呼喚遠方

TA貢獻1856條經驗 獲得超11個贊

如果您真的想將查詢參數用于分頁(類似/foo?page=2)和 SSG,我剛剛想出了一個解決方法。

您可以使用 Next JSrewritesredirects功能。

首先,使用/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


查看完整回答
反對 回復 2022-10-21
?
UYOU

TA貢獻1878條經驗 獲得超4個贊

因為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


查看完整回答
反對 回復 2022-10-21
  • 2 回答
  • 0 關注
  • 384 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號