Mengapa Saya Mendapat Ralat Ambil Semasa Kompilasi Tapak Statik Next.js dengan `getStaticProps` dan `getStaticPaths`?

Mendedahkan Punca Ralat Pengambilan dalam Kompilasi Tapak Statik Next.js

Apabila menggunakan Next.js untuk membina tapak web statik, adalah penting untuk mengetahui punca ralat tertentu yang mungkin timbul semasa proses binaan. Dalam keadaan ini, kami akan menangani masalah khusus yang dihadapi semasa binaan npm run apabila menggunakan kedua-dua getStaticProps dan getStaticPaths untuk mendapatkan semula data daripada laluan API.

Butiran Ralat

Ralat utama yang dihadapi dikaitkan dengan respons JSON tidak sah yang diterima daripada laluan API semasa melaksanakan binaan npm run. Respons ini nampaknya berasal dari halaman laluan API/api/products/[slug].js.

Punca Kemungkinan

1. Penghalaan API Salah : Periksa pelaksanaan pages/api/products/[slug].js dengan teliti untuk memastikan sama ada data diambil dan diproses dengan sewajarnya. Jika terdapat sebarang kesilapan dalam kod ini, ia boleh menyebabkan respons JSON tidak sah.
2. Ketersediaan Laluan API: Perlu diingat bahawa laluan API tidak boleh diakses semasa proses binaan. Oleh itu, jika fungsi getStaticProps atau getStaticPaths anda bergantung pada laluan API untuk mendapatkan data, ini boleh membawa kepada ralat.

Resolusi Disyorkan

Untuk membetulkan isu ini, pertimbangkan untuk memfaktorkan semula kod anda dalam perkara berikut cara:

1. Gunakan Logik Bahagian Pelayan: Memandangkan getStaticProps beroperasi secara eksklusif di bahagian pelayan, anda boleh memintas laluan API dengan menyepadukan logik bahagian pelayan terus ke dalam fungsi ini. Ini menghapuskan keperluan untuk mengambil data daripada laluan API dan sebaliknya membenarkan anda mendapatkan data secara terus.
2. Pendapatan Data daripada Pelayan: Akses terus sumber data, yang dalam kes ini disimpan dalam data/produk, dalam getStaticProps dan getStaticPaths. Ubah suai fungsi anda seperti berikut:

// /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 menerima pakai perubahan ini, anda akan mengalih keluar pergantungan pada laluan API, menyelesaikan ralat respons JSON yang tidak sah dan membenarkan kompilasi tapak web statik yang lancar.

Atas ialah kandungan terperinci Mengapa Saya Mendapat Ralat Ambil Semasa Kompilasi Tapak Statik Next.js dengan `getStaticProps` dan `getStaticPaths`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!