为什么在最新的 Next.js 应用程序目录中 `getStaticProps` 没有运行并返回未定义？

getStaticProps 在最新的 Next.js 中未运行并返回未定义

问题描述

尝试使用 getStaticProps 从 API 端点获取数据时Next.js最新版本，用户遇到函数不执行且返回数据未定义的问题。这会导致映射数据时出错，因为无法读取未定义的属性。

解决方案

虽然 getStaticProps 用于在服务器上获取数据，但它仅适用于pages 文件夹，这是 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中文网其他相关文章！