Ordre d’exécution en JavaScript et props dans Next.js avec getStaticProps

Question

Bonjour, Dans JavaScript , l'ordre d'écriture du code a bien son importance ? Du coup, JavaScript va commencer par lire la fonction Projet , mais quand on fait props.projet , projet n'existe pas encore vu qu'il est créé par la fonction du dessous qui sera exécutée plus tard. Du coup, je ne comprends plus. // Librairie import { useRouter } from "next/router"; import Link from "next/link"; import CarteDeProjet from "@/components/CarteDeProjet/CarteDeProjet"; import { connectToDatabase } from "../../helpers/mongodb"; export default function Projet(props) { // Variable const { titre, description, client, annee, slug } = props.projet; let clientAAfficher = client; if (client == "projet personnel") { clientAAfficher = "perso"; } // Méthode return ( <>

{titre}

{client}

projet réalisé en {annee}

); } export async function getStaticProps(context) { // Variables let projetRecupere; const { params } = context; const slug = params.slug; try { const client = await connectToDatabase(); // Connexion à la BD const db = client.db("portfolio"); projetRecupere = await db .collection("projets") .find({ slug: slug }) .sort({ annee: "desc" }) .toArray(); } catch (error) { projetRecupere = []; } return { props: { projet: JSON.parse(JSON.stringify(projetRecupere))[0], }, }; } export async function getStaticPaths() { // Variables let projets; try { // Connexion à MongoDB const client = await connectToDatabase(); const db = await client.db("portfolio"); // Récupérer les projets projets = await db.collection("projets").find().toArray(); } catch (error) { projets = []; } const dynamicPaths = projets.map((projet) => ({ params: { slug: projet.slug, }, })); return { paths: dynamicPaths, fallback: false, }; }

Louis-Nicolas Leuillet · Accepted Answer

Bonjour Jean-Luc,
Le code JavaScript est bien lu de haut en bas. En revanche, les composants sont lus du parent à l'enfant, il y a donc toutes les valeurs props qui sont existantes.

Ordre d’exécution en JavaScript et props dans Next.js avec getStaticProps

Développez des applications full-stack en JavaScript avec NextJS et React