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

非获取数据请求

您可以省略 fetch() 并使用库或 ORM 直接访问数据。在这种情况下，您可以使用路由段配置，如下面的代码所示：

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

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

与 Prisma 的数据库交互

import prisma from "./lib/prisma";

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

通过遵守这些建议，无论您采用什么文件结构或数据获取方法，您都可以在 Next.js 应用程序中有效地获取数据。

以上是使用 getStaticProps 时，为什么我在 Next.js 中获取的数据未定义？的详细内容。更多信息请关注PHP中文网其他相关文章！