Warum sind meine abgerufenen Daten in Next.js undefiniert, wenn ich getStaticProps verwende?

Fehlerbehebung beim Abrufen von Next.js-Daten mit getStaticProps

Trotz der Implementierung der getStaticProps-Methode in Ihrer Next.js-Anwendung stoßen Sie auf ein Problem, bei dem Die abgerufenen Daten sind undefiniert. Das Problem hängt wahrscheinlich mit Ihrer Dateistruktur zusammen und die folgende Anleitung wird dieses Problem beheben.

Serverkomponenten

In neueren Versionen von Next.js sind Seitenkomponenten enthalten Der Seitenordner (die traditionelle Methode zum Einrichten von Routen) nutzt Serverkomponenten für den serverseitigen Datenabruf.

Datenabruf innerhalb des App-Verzeichnisses

Nach dem Übergang zur App Verzeichnis (der bevorzugte Ansatz für Next.js 13) können Sie Serverkomponenten nutzen, um Daten direkt im Komponentenkörper abzurufen. Dies wird wie im bereitgestellten Codeausschnitt dargestellt erreicht, mit spezifischen Kommentaren zur Orientierung.

Anforderungscookies und Header importieren

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

Abrufen von Daten basierend auf Caching-Optionen

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

Nicht-Abrufdatenanforderung

Sie können fetch() weglassen und direkt über Bibliotheken oder ORM auf Daten zugreifen. In diesem Szenario können Sie Route Segment Config verwenden, wie im folgenden Code gezeigt:

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

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

Datenbankinteraktion mit Prisma

import prisma from "./lib/prisma";

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

Indem Sie diese befolgen Empfehlungen können Sie effektiv Daten in Ihrer Next.js-Anwendung abrufen, unabhängig von der Dateistruktur oder Datenabrufmethode, die Sie verwenden.

Das obige ist der detaillierte Inhalt vonWarum sind meine abgerufenen Daten in Next.js undefiniert, wenn ich getStaticProps verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!