揭秘Next.js 靜態(tài)網(wǎng)站編譯中Fetch 錯(cuò)誤的原因

使用Next.js 建立靜態(tài)網(wǎng)站時(shí)，勢(shì)在必行了解建置過(guò)程中可能出現(xiàn)的某些錯(cuò)誤的來(lái)源。在本例中，我們將解決 npm run build 期間使用 getStaticProps 和 getStaticPaths 從 API 路由擷取資料時(shí)遇到的特定問(wèn)題。

錯(cuò)誤詳細(xì)資訊

遇到的主要錯(cuò)誤與執(zhí)行 npm run build 時(shí)從 API 路由收到的無(wú)效 JSON 回應(yīng)相關(guān)。此回應(yīng)似乎源自 API 路由pages/api/products/[slug].js。

可能的原因

1. API 路由不正確:徹底檢查pages/api/products/[slug].js的實(shí)作以確定是否數(shù)據(jù)被適當(dāng)?shù)孬@取和處理。如果此程式碼中存在任何錯(cuò)誤，則可能會(huì)導(dǎo)致無(wú)效的 JSON 回應(yīng)。
2. API 路由可用性： 請(qǐng)記住，API 路由在建置過(guò)程中無(wú)法存取。因此，如果您的 getStaticProps 或 getStaticPaths 函數(shù)依賴 API 路由來(lái)獲取數(shù)據(jù)，則可能會(huì)導(dǎo)致錯(cuò)誤。

建議解決方案

要修正此問(wèn)題，考慮在下面重構(gòu)您的程式碼方式：

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

// /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,
  };
};

透過(guò)採(cǎi)用這些更改，您將消除對(duì) API 路由的依賴，解決無(wú)效的 JSON 回應(yīng)錯(cuò)誤，並允許無(wú)縫靜態(tài)網(wǎng)站編譯。

以上是為什麼我在使用'getStaticProps”和'getStaticPaths”進(jìn)行 Next.js 靜態(tài)網(wǎng)站編譯期間出現(xiàn)獲取錯(cuò)誤？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！