Mengapa Saya Mendapat Ralat Pengambilan Semasa Membina Laman Web Statik Next.js dalam Pengeluaran?

Ralat Semasa Menjana Laman Web Statik untuk Next.js dalam Pengeluaran

Pengguna Next.js mungkin menghadapi ralat pengambilan semasa membina tapak web statik untuk pengeluaran (npm run build) walaupun mempunyai persediaan pembangunan berfungsi (npm run dev). Isu ini timbul apabila mengambil data daripada laluan API dalam fungsi getStaticProps atau getStaticPath.

Punca Punca

Next.js membina tapak web statik dengan pra-pemarahan halaman dan data pada pelayan sebelum menggunakan mereka ke persekitaran pengehosan. Walau bagaimanapun, laluan API, yang biasanya digunakan untuk mendapatkan semula data dinamik, tidak tersedia semasa proses binaan kerana pelayan belum lagi aktif.

Resolusi

Untuk menyelesaikan isu ini, elakkan mengakses laluan API dalaman dari dalam fungsi getStaticProps/getStaticPath. Fungsi ini beroperasi secara eksklusif pada bahagian pelayan dan tidak seharusnya bergantung pada permintaan rangkaian luaran.

Pendekatan Disyorkan

Sebaliknya, benamkan terus kod sebelah pelayan dalam getStaticProps/getStaticPath untuk mengambil data daripada sumber data. Memandangkan fungsi ini dilaksanakan pada pelayan, mengakses pangkalan data atau menjalankan operasi sebelah pelayan adalah dibenarkan.

Contoh Pemfaktoran Semula

Dalam kod yang anda berikan, anda boleh menemui getStaticProps yang dipinda dan getStaticPaths berfungsi di bawah:

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 melaksanakan ini perubahan, anda boleh menghapuskan ralat pengambilan yang dihadapi semasa pengeluaran pengeluaran.

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