為什麼我在 Next.js 靜態網站生產建置過程中出現取得錯誤？

Next.js 靜態網站生產建置期間取得錯誤

在生產中建置Next.js 網站時，您可能會遇到在執行時不會發生的取得錯誤發展模式。這可能會令人沮喪和困惑。

了解錯誤

錯誤訊息「FetchError: invalid json response body at ...」通常表示 API 路由回傳的 JSON 回應存在問題。具體來說，錯誤「JSON 中位置 0 處出現意外的令牌 T」表示伺服器傳回了無效的 JSON 資料。

原因和解決方案

呼叫內部 API 路由

在 Next.js 中，避免在 getStaticProps 中呼叫內部 API 路由至關重要。內部 API 路由在建置時不可用，因為伺服器尚未啟動。

解決方案： 將 getStaticProps 中的 API 路由呼叫替換為執行必要操作的直接伺服器端程式碼資料擷取。

絕對 URL fetch

如果從 next.config.js 中刪除 assetPrefix，請確保 fetch 中使用的 URL 是絕對的。相對 URL 在生產版本中可能無法運作。

解決方案：修改 fetch 呼叫以使用絕對 URL。

程式碼重構

這裡是重構的您的程式碼版本可以避免錯誤：

// 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 }, locale }));
  return {
    fallback: true,
    paths,
  };
};

結論

透過了解Next.js 生產建置期間取得錯誤的原因並應用適當的解決方案，您可以確保靜態網站的成功部署。請記得避免在 getStaticProps 中呼叫內部 API 路由，在 fetch 中使用絕對 URL，並且偏好在生產建置中使用直接伺服器端程式碼來取得資料。

以上是為什麼我在 Next.js 靜態網站生產建置過程中出現取得錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！