為什麼在最新的 Next.js 應用程式目錄中 `getStaticProps` 沒有運行並返回未定義？

getStaticProps 在最新的Next.js 中未運行並傳回未定義

問題描述

嘗試使用getStaticProps 從API 端點取得資料時取得資料。 .js最新版本，使用者遇到函數不執行且傳回資料未定義的問題。這會導致映射資料時出錯，因為無法讀取未定義的屬性。

解決方案

雖然 getStaticProps 用於在伺服器上獲取數據，但它僅適用於page 資料夾，這是在 Next.js 中設定路由的傳統方法。

在使用 app 目錄的現代 Next.js 應用程式中，伺服器元件提供了更靈活的資料擷取方法。以下是一個程式碼片段，示範如何直接在元件主體中取得資料：

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 "...";
}

此程式碼可讓您控制所取得資料的快取行為，包括強制快取、不快取或在

或者，您也可以不使用fetch() 來取得資料；使用第三方函式庫或直接使用ORM 查詢資料庫。在這種情況下，您可以使用路由段配置：

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

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

此方法可讓您透過 revalidate 屬性指定所取得資料的快取行為，或使用動態屬性完全停用快取。

以上是為什麼在最新的 Next.js 應用程式目錄中 `getStaticProps` 沒有運行並返回未定義？的詳細內容。更多資訊請關注PHP中文網其他相關文章！