如何在 Next.js 的語言環境中獲取 getStaticPaths 中的路徑？

Question

我將 Strapi 用作 CMS，在其中查詢 slug，並且我希望在 Next.js 中使用 getStaticPaths 和 getStaticProps 靜態生成頁面。

由於我需要使用多個區域設置，因此我必須通過區域設置 map 並獲取我從查詢中獲得的每個“公告”的路徑。

我收到的錯誤消息是：

Error: A required parameter (slug) was not provided as a string in getStaticPaths for /updates/announcements/[slug]

這是我的 getStaticPaths：

export async function getStaticPaths({ locales }: any) {
  const paths = await (
    await Promise.all(
      locales.map(async (locale: any) => {
        const { data } = await client.query({
          query: gql`
            query Announcements {
              announcements(locale: "${locale}") {
                data {
                  attributes {
                    slug
                    locale
                  }
                }
              }
            }
          `,
        });
        return {
          announcements: data.announcements.data,
          locale,
        };
      })
    )
  ).reduce((acc, item) => {
    item.announcements.map((p: any) => {
      acc.push({
        params: {
          slug:
            p.attributes.slug === "/" ? false : p.attributes.slug.split("/"),
        },
        locale: p.attributes.locale,
      });
      return p;
    });
    return acc;
  }, []);

  return {
    paths,
    fallback: false,
  };
}

如果我 console.log(paths) 我在終端中得到以下信息：

[
  { params: { slug: [Array] }, locale: 'en' },
  { params: { slug: [Array] }, locale: 'en' },
  { params: { slug: [Array] }, locale: 'en' },
  { params: { slug: [Array] }, locale: 'da' },
  { params: { slug: [Array] }, locale: 'sv' },
  { params: { slug: [Array] }, locale: 'nb' }
]

我可能認為 Next.js 不希望 slug 成為一個數組，但我不完全確定。 我究竟做錯了什么？

Answer 1

您的頁面使用名為 ( /updates/announcements/[slug] ) 的動態路由，因此paths中需要參數slug 。

來自Next.js getStaticPaths文檔：

paths鍵決定了哪些路徑將被預渲染。 例如，假設您有一個使用名為pages/posts/[id].js的動態路由的頁面。 如果您從此頁面導出getStaticPaths並為paths返回以下內容：

 return { paths: [ { params: { id: '1' }}, { params: { id: '2' }, // with i18n configured the locale for the path can be returned as well locale: "en", }, ], fallback: ... }

然后，Next.js 將next build期間使用pages/posts/[id].js中的頁面組件靜態生成/posts/1和/posts/2 。

slug參數只能是一個string ，因為它用於生成路由。 正如您在記錄paths時發現的那樣，您試圖傳遞slug: [Array] 。

問題代碼片段中的問題是這個表達式分配一個slug ：

// ...
params: {
  slug: p.attributes.slug === "/" ? false : p.attributes.slug.split("/"), // 👈
},
// ...

此表達式將分配false （布爾值）或子字符串數組（請參閱String.prototype.split()的文檔）。

在這種情況下，正如上面的評論所證實的那樣，只需將 slug 作為字符串傳遞即可解決問題。

混淆可能來自於使用可選的包羅萬象的路由( pages/[[...slug]] ) 而不是常規動態路由 ( pages/[slug] ) ( ref ) 的教程。

再次來自Next.js getStaticPaths文檔：

• 如果頁面名稱是pages/posts/[postId]/[commentId] ，那么 params 應該包含postId和commentId 。
• 如果頁面名稱使用像pages/[...slug]這樣的包羅萬象的路由，那么 params 應該包含slug （它是一個數組）。 如果這個數組是['hello', 'world'] ，那么 Next.js 將在/hello/world靜態生成頁面。
• 如果頁面使用可選的包羅萬象的路由，請使用null 、 [] 、 undefined或false來呈現最根路由。 例如，如果您為pages/[[...slug]]提供slug: false ，則 Next.js 將靜態生成頁面/ 。