Pourquoi mes données récupérées ne sont-elles pas définies dans Next.js lors de l'utilisation de getStaticProps ?

Dépannage de la récupération de données Next.js avec getStaticProps

Malgré l'implémentation de la méthode getStaticProps dans votre application Next.js, vous rencontrez un problème où les données récupérées ne sont pas définies. Le problème est probablement lié à la structure de vos fichiers, et les conseils suivants résoudront ce problème.

Composants du serveur

Dans les versions récentes de Next.js, les composants de page dans le dossier Pages (la méthode traditionnelle de configuration des itinéraires) utilise des composants serveur pour la récupération de données côté serveur.

Récupération de données dans l'application Répertoire

Après la transition vers le répertoire de l'application (l'approche préférée pour Next.js 13), vous pouvez exploiter les composants serveur pour récupérer des données directement dans le corps du composant. Ceci est accompli comme illustré dans l'extrait de code fourni, avec des commentaires spécifiques à titre indicatif.

Importer les cookies et les en-têtes de demande

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

Récupération de données basées sur Options de mise en cache

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

Données non récupérées Requête

Vous pouvez omettre fetch() et accéder directement aux données à l'aide de bibliothèques ou d'ORM. Dans ce scénario, vous pouvez utiliser Route Segment Config, comme démontré dans le code ci-dessous :

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

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

Interaction de la base de données avec Prisma

import prisma from "./lib/prisma";

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

En adhérant à ces recommandations, vous pouvez récupérer efficacement des données dans votre application Next.js, quelle que soit la structure du fichier ou la méthode de récupération des données que vous utilisez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!