Mengapa Saya Mendapat 'Ralat Ambil' Semasa Membina Tapak Statik Next.js Saya dalam Pengeluaran?

Ralat Ambil Semasa Membina Laman Web Statik Next.js dalam Pengeluaran

Apabila membina tapak web Next.js untuk pengeluaran, anda mungkin mengalami "Ralat Ambil" apabila menggunakan getStaticProps dan getStaticPaths untuk mengambil data daripada laluan API. Ralat ini boleh berlaku atas beberapa sebab.

Penggunaan Laluan API Dalaman dalam getStaticProps

Dalam kod yang disediakan, anda sedang memanggil laluan API dalaman, /api/products/${slug} , dari dalam getStaticProps. Ini tidak disyorkan kerana laluan API tidak tersedia semasa masa binaan, yang membawa kepada ralat pengambilan.

Kod Sisi Pelayan dalam getStaticProps dan getStaticPaths

Daripada mengambil laluan API, anda harus menulis kod sebelah pelayan terus dalam getStaticProps dan getStaticPaths. Ini hanya menjalankan bahagian pelayan dan membenarkan anda menulis kod terus menggunakan sumber bahagian pelayan seperti pertanyaan pangkalan data.

Kod Ditulis Semula

Berikut ialah versi kod anda yang diubah suai:

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

Dengan menggunakan sumber data terus dalam getStaticProps dan getStaticPaths, anda mengelak daripada memanggil laluan API dalaman semasa masa binaan, menyelesaikan pengambilan ralat.

Atas ialah kandungan terperinci Mengapa Saya Mendapat 'Ralat Ambil' Semasa Membina Tapak Statik Next.js Saya dalam Pengeluaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!