Mengapakah data saya yang diambil tidak ditentukan dalam Next.js apabila menggunakan getStaticProps?

Menyelesaikan Masalah Pengambilan Data Next.js dengan getStaticProps

Walaupun melaksanakan kaedah getStaticProps dalam aplikasi Next.js anda, anda menghadapi masalah di mana data yang diambil tidak ditentukan. Isu ini berkemungkinan berkaitan dengan struktur fail anda dan panduan berikut akan menangani masalah ini.

Komponen Pelayan

Dalam versi terbaharu Next.js, komponen halaman dalam folder halaman (kaedah tradisional untuk menyediakan laluan) menggunakan Komponen Pelayan untuk pengambilan data sebelah pelayan.

Pengambilan Data Dalam Apl Direktori

Selepas beralih ke direktori apl (pendekatan pilihan untuk Next.js 13), anda boleh memanfaatkan Komponen Pelayan untuk mendapatkan data terus dalam badan komponen. Ini dicapai seperti yang digambarkan dalam coretan kod yang disediakan, dengan ulasan khusus untuk panduan.

Import Permintaan Kuki dan Pengepala

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

Mengambil Data Berdasarkan Pilihan Caching

// Force caching until manually invalidated, similar to getStaticProps
const staticData = await fetch(`https://...`, { cache: "force-cache" });

// Refetch on every request, similar to getServerSideProps
const dynamicData = await fetch(`https://...`, { cache: "no-store" });

// Cache with a lifespan of 10 seconds, similar to getStaticProps with revalidate
const revalidatedData = await fetch(`https://...`, {
  next: { revalidate: 10 },
});

Bukan Ambil Permintaan Data

Anda boleh meninggalkan fetch() dan mengakses data secara terus menggunakan perpustakaan atau ORM. Dalam senario ini, anda boleh menggunakan Konfigurasi Segmen Laluan, seperti yang ditunjukkan dalam kod di bawah:

// revalidate every 10 seconds
export const revalidate = 10;

// no caching
export const dynamic = "force-dynamic";

Interaksi Pangkalan Data dengan Prisma

import prisma from "./lib/prisma";

const posts = await prisma.post.findMany();

Dengan mematuhi ini cadangan, anda boleh mengambil data dengan berkesan dalam aplikasi Next.js anda, tanpa mengira struktur fail atau pengambilan data kaedah yang anda gunakan.

Atas ialah kandungan terperinci Mengapakah data saya yang diambil tidak ditentukan dalam Next.js apabila menggunakan getStaticProps?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!