Pourquoi « getStaticProps » n'est-il pas exécuté et renvoyé de manière non définie dans le dernier répertoire d'applications Next.js ?

getStaticProps ne s'exécute pas et ne renvoie pas de définition dans le dernier Next.js

Description du problème

Lors de la tentative de récupération de données à partir d'un point de terminaison d'API à l'aide de getStaticProps dans Dans la dernière version de Next.js, les utilisateurs rencontrent le problème où la fonction ne s'exécute pas et les données renvoyées ne sont pas définies. Cela entraîne une erreur lors du mappage des données car il ne peut pas lire les propriétés d'undefined.

Solution

Bien que getStaticProps soit utilisé pour récupérer des données sur le serveur, il n'est applicable qu'aux composants de page au sein du pages, qui est la méthode traditionnelle de configuration des itinéraires dans Next.js.

Dans les applications Next.js modernes utilisant le répertoire d'applications, les composants du serveur offrent une approche plus flexible de la récupération de données. Voici un extrait de code qui montre comment récupérer des données directement dans le corps du composant :

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

Ce code vous permet de contrôler le comportement de mise en cache des données récupérées, y compris la mise en cache forcée, l'absence de mise en cache ou la revalidation après une période spécifiée.

Vous pouvez également récupérer des données sans utiliser fetch(); utilisez des bibliothèques tierces ou interrogez directement votre base de données avec un ORM. Dans ce cas, vous pouvez utiliser Route Segment Config :

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

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

Cette approche vous permet de spécifier le comportement de mise en cache des données récupérées via la propriété revalidate ou de désactiver complètement la mise en cache à l'aide de la propriété dynamique.

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!