為什麼在生產環境中建立 Next.js 靜態網站時會出現取得錯誤？

在生產中為Next.js 產生靜態網站時出錯

Next.js 使用者在建立用於生產的靜態網站時可能會遇到獲取錯誤（npm run build）儘管有功能開發設定（npm run dev）。當從 getStaticProps 或 getStaticPath 函數中的 API 路由取得資料時，會發生此問題。

根本原因

Next.js 透過預先渲染頁面和資料來建立靜態網站伺服器，然後再將它們部署到託管環境。但是，通常用於動態資料檢索的 API 路由在建置過程中不可用，因為伺服器尚未啟動。

解決方案

要解決對於此問題，請避免從 getStaticProps/getStaticPath 函數內存取內部 API 路由。這些函數專門在伺服器端運行，不應依賴外部網路請求。

推薦方法

相反，直接在 getStaticProps/getStaticPath 中嵌入伺服器端程式碼從資料來源取得資料。由於這些函數在伺服器上執行，因此可以存取資料庫或執行伺服器端操作。

重構範例

在您提供的程式碼中，您可以找到修改過的getStaticProps和getStaticPaths 函數如下：

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

透過實施這些更改，您可以消除fetch生產建置期間遇到的錯誤。

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