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

Ralat Ambil Semasa Pembinaan Pengeluaran Laman Web Statik Next.js

Apabila membina tapak web Next.js dalam pengeluaran, anda mungkin menghadapi ralat pengambilan yang tidak berlaku semasa dijalankan mod pembangunan. Ini boleh mengecewakan dan mengelirukan.

Memahami Ralat

Mesej ralat "FetchError: badan respons json tidak sah di ..." selalunya menunjukkan masalah dengan respons JSON yang dikembalikan oleh laluan API anda . Khususnya, ralat "Token T yang tidak dijangka dalam JSON pada kedudukan 0" menunjukkan bahawa pelayan mengembalikan data JSON yang tidak sah.

Punca dan Penyelesaian

Memanggil Laluan API Dalaman

Dalam Next.js, adalah penting untuk mengelak daripada memanggil laluan API dalaman di dalam getStaticProps. Laluan API dalaman tidak tersedia semasa masa bina kerana pelayan masih belum dimulakan.

Penyelesaian: Gantikan panggilan laluan API dalam getStaticProps dengan kod sebelah pelayan langsung yang melaksanakan yang diperlukan pengambilan data.

URL mutlak dalam pengambilan

Jika anda mengalih keluar assetPrefix dari next.config.js, pastikan URL yang digunakan dalam pengambilan adalah mutlak. URL relatif mungkin tidak berfungsi dalam binaan pengeluaran.

Penyelesaian: Ubah suai panggilan pengambilan untuk menggunakan URL mutlak.

Kod Refactor

Berikut ialah pemfaktoran semula versi kod anda yang mengelakkan ralat:

// 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 }, locale }));
  return {
    fallback: true,
    paths,
  };
};

Kesimpulan

Dengan memahami punca ralat pengambilan semasa pengeluaran Next.js membina dan menggunakan penyelesaian yang sesuai, anda boleh memastikan penggunaan tapak web statik anda berjaya. Ingat untuk mengelak daripada memanggil laluan API dalaman dalam getStaticProps, gunakan URL mutlak dalam pengambilan dan lebih suka kod sebelah pelayan langsung untuk pengambilan data dalam binaan pengeluaran.

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