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

在生產中建立Next.js 靜態網站時取得錯誤

建置Next.js 網站進行生產時，使用getStaticProps 時可能會遇到「取得錯誤」和getStaticPaths 從API 路由取得資料。發生此錯誤的原因有很多。

getStaticProps 中的內部 API 路由使用

在提供的程式碼中，您正在呼叫內部 API 路由 /api/products/${slug} ，來自 getStaticProps 內。不建議這樣做，因為 API 路由在建置期間不可用，從而導致獲取錯誤。

getStaticProps 和 getStaticPaths 中的伺服器端程式碼

您應該編寫而不是取得 API 路由伺服器端程式碼直接在 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,
    }
}

透過直接在getStaticProps 和getStaticPaths 中使用資料來源，您可以避免在建置時呼叫內部API 路由，從而解決了取得問題錯誤。

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