Mengapa `getStaticProps` Tidak Berjalan dan Kembali Tidak Ditakrifkan dalam Direktori Apl Next.js Terkini?

getStaticProps Tidak Berjalan dan Kembali Tidak Ditakrifkan dalam Next.js Terkini

Penerangan Isu

Apabila cuba mengambil data daripada titik akhir API menggunakan getStaticProps dalam versi terkini Next.js, pengguna menghadapi isu di mana fungsi tidak dilaksanakan dan data yang dikembalikan tidak ditentukan. Ini mengakibatkan ralat semasa memetakan data kerana ia tidak dapat membaca sifat undefined.

Penyelesaian

Walaupun getStaticProps digunakan untuk mengambil data pada pelayan, ia hanya terpakai kepada komponen halaman dalam folder pages, yang merupakan kaedah tradisional untuk menyediakan laluan dalam Next.js.

Dalam aplikasi Next.js moden menggunakan direktori aplikasi, komponen pelayan menyediakan pendekatan yang lebih fleksibel untuk pengambilan data. Berikut ialah coretan kod yang menunjukkan cara untuk mengambil data terus dalam badan komponen:

import { cookies, headers } from "next/headers";

export default async function Component({ params, searchParams }) {
  const staticData = await fetch("https://...", { cache: "force-cache" });
  const dynamicData = await fetch("https://...", { cache: "no-store" });
  const revalidatedData = await fetch("https://...", { next: { revalidate: 10 } });

  return "...";
}

Kod ini membolehkan anda mengawal gelagat caching data yang diambil, termasuk caching paksa, tiada caching atau pengesahan semula selepas tempoh yang ditentukan.

Sebagai alternatif, anda juga boleh mengambil data tanpa menggunakan fetch(); gunakan perpustakaan pihak ketiga atau tanya terus pangkalan data anda dengan ORM. Dalam kes ini, anda boleh menggunakan Konfigurasi Segmen Laluan:

async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}

Pendekatan ini membolehkan anda menentukan gelagat caching data yang diambil melalui sifat pengesahan semula atau lumpuhkan caching sama sekali menggunakan sifat dinamik.

Atas ialah kandungan terperinci Mengapa `getStaticProps` Tidak Berjalan dan Kembali Tidak Ditakrifkan dalam Direktori Apl Next.js Terkini?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!