為什麼我在使用'getStaticProps”和'getStaticPaths”進行 Next.js 靜態網站編譯期間出現獲取錯誤？

揭秘Next.js 靜態網站編譯中Fetch 錯誤的原因

使用Next.js 建立靜態網站時，勢在必行了解建置過程中可能出現的某些錯誤的來源。在本例中，我們將解決 npm run build 期間使用 getStaticProps 和 getStaticPaths 從 API 路由擷取資料時遇到的特定問題。

錯誤詳細資訊

遇到的主要錯誤與執行 npm run build 時從 API 路由收到的無效 JSON 回應相關。此回應似乎源自 API 路由pages/api/products/[slug].js。

可能的原因

1. API 路由不正確:徹底檢查pages/api/products/[slug].js的實作以確定是否數據被適當地獲取和處理。如果此程式碼中存在任何錯誤，則可能會導致無效的 JSON 回應。
2. API 路由可用性： 請記住，API 路由在建置過程中無法存取。因此，如果您的 getStaticProps 或 getStaticPaths 函數依賴 API 路由來獲取數據，則可能會導致錯誤。

建議解決方案

要修正此問題，考慮在下面重構您的程式碼方式：

1. 利用伺服器端邏輯：由於getStaticProps專門在伺服器端運行，因此您可以透過將伺服器端邏輯直接整合到這些函數中來繞過 API 路由。這消除了從 API 路由獲取資料的需要，而是允許您直接檢索資料。
2. 從伺服器擷取資料：直接存取資料來源，在本例中是儲存的在資料/產品中，在 getStaticProps 和 getStaticPaths 中。如下修改您的函數：

// /pages/product/[slug]

import db from '../../../data/products';

// Remaining code.

export const getStaticProps = async ({ params: { slug }, locale }) = {
  const result = db.filter((item) => item.slug === slug);
  const data = result.filter((item) => item.locale === locale)[0];
  const { title, keywords, description } = data;
  return {
    props: {
      data,
      description,
      keywords,
      title,
    },
  };
};

export const getStaticPaths = async () = {
  const paths = db.map(({ slug, locale }) => ({
    params: { slug: slug },
    locale,
  }));
  return {
    fallback: true,
    paths,
  };
};

透過採用這些更改，您將消除對 API 路由的依賴，解決無效的 JSON 回應錯誤，並允許無縫靜態網站編譯。

以上是為什麼我在使用'getStaticProps”和'getStaticPaths”進行 Next.js 靜態網站編譯期間出現獲取錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！