使用 getStaticProps 時，為什麼我在 Next.js 中取得的資料未定義？

使用getStaticProps 排除Next.js 資料取得問題

儘管在Next.js 應用程式中實作了getStaticProps 方法，但您還是遇到了以下問題：取得的數據未定義。該問題可能與您的文件結構有關，以下指南將解決此問題。

伺服器元件

在Next.js 的最新版本中，頁面元件位於頁面資料夾（設定路由的傳統方法）利用伺服器元件進行伺服器端資料取得。

應用程式內的資料取得目錄

轉換到應用程式目錄（Next.js 13 的首選方法）後，您可以利用伺服器元件直接在元件主體中檢索資料。這是按照提供的程式碼片段中所示完成的，並帶有具體註釋作為指導。

導入請求Cookie 與標頭

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

基於下列內容取得資料快取選項

// 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 },
});

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

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

import prisma from "./lib/prisma";

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

非取得資料請求您可以省略fetch() 並使用函式庫或 ORM 直接存取資料。在這種情況下，您可以使用路由段配置，如下面的程式碼所示：與Prisma 的資料庫互動透過遵守這些建議，您可以在Next.js 應用程式中有效地獲取數據，無論您的檔案結構或資料擷取方法如何僱用。

以上是使用 getStaticProps 時，為什麼我在 Next.js 中取得的資料未定義？的詳細內容。更多資訊請關注PHP中文網其他相關文章！