Warum wird „getStaticProps' im neuesten Next.js-App-Verzeichnis nicht ausgeführt und undefiniert zurückgegeben?

getStaticProps wird im neuesten Next.js nicht ausgeführt und gibt undefiniert zurück

Problembeschreibung

Beim Versuch, Daten von einem API-Endpunkt mithilfe von getStaticProps abzurufen Bei der neuesten Version von Next.js tritt bei Benutzern das Problem auf, dass die Funktion nicht ausgeführt wird und die zurückgegebenen Daten undefiniert sind. Dies führt zu einem Fehler beim Zuordnen der Daten, da die Eigenschaften von undefiniert nicht gelesen werden können.

Lösung

getStaticProps wird zwar zum Abrufen von Daten auf dem Server verwendet, ist jedoch nur auf Seitenkomponenten innerhalb von anwendbar Dies ist die traditionelle Methode zum Einrichten von Routen in Next.js.

In modernen Next.js-Anwendungen, die das App-Verzeichnis verwenden, bieten Serverkomponenten einen flexibleren Ansatz für den Datenabruf. Hier ist ein Codeausschnitt, der zeigt, wie Daten direkt im Komponentenkörper abgerufen werden:

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

Mit diesem Code können Sie das Caching-Verhalten der abgerufenen Daten steuern, einschließlich erzwungener Caching, keiner Caching oder erneuter Validierung nach einem angegebenen Zeitraum.

Alternativ können Sie Daten auch abrufen, ohne fetch(); Verwenden Sie Bibliotheken von Drittanbietern oder fragen Sie Ihre Datenbank direkt mit einem ORM ab. In diesem Fall können Sie Route Segment Config verwenden:

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

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

Mit diesem Ansatz können Sie das Caching-Verhalten der abgerufenen Daten über die Eigenschaft „revalidate“ festlegen oder das Caching mithilfe der dynamischen Eigenschaft vollständig deaktivieren.

Das obige ist der detaillierte Inhalt vonWarum wird „getStaticProps' im neuesten Next.js-App-Verzeichnis nicht ausgeführt und undefiniert zurückgegeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!