Rückblick: Datenabruf
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy. Lektion 28 von 47.
Aufgabe
MittelKapitelzusammenfassung: ein Menü, das alles auf dem Server lädt.
lib/data.js wird bereitgestellt und ist gesperrt: getDishes() gibt ein Promise für ein Array von { id, name, price }-Objekten zurück, und getDish(slug) sucht ein einzelnes davon heraus.
- In
app/page.jsxmacheHomezu einerasync-Funktion und weiseawait getDishes()einerdishes-Variable zu. - Rendere innerhalb von
<ul id="dish-list">ein<li>pro Gericht, mitkey={dish.id},id={dish.id}und demnamedes Gerichts als Text. app/menu/[slug]/page.jsxzeigt für jede URLUnknown dishan: Es destrukturiertparams, ohne darauf zu warten. Warte aufparams, damit die Suche einen echten Slug erhält. Der Aufruf von/menu/carbonaramussCarbonarain#dish-nameund den zugehörigen Preis in#dish-priceanzeigen.
Probier es selbst
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Alle Lektionen in Next.js Essentials
4Server & Client
Zwei Arten von KomponentenDen Fehler lesenDie Zeile „use client“Client-Teile klein haltenServer innerhalb des ClientsRückblick: Server & Client7Clientseitige Navigation
Der aktive LinkProgrammatisches RoutingFiltern mit der URLRoute-HandlerRückblick: Navigation2Routing & Links
Ordner sind RoutenVerschachtelte RoutenSeiten verknüpfenDynamische RoutenNicht-gefunden-SeitenRückblick: Routing5Daten auf dem Server
Asynchrone KomponentenAuf Route-Parameter wartenZwei Abrufe gleichzeitigLadezuständeFehlerbehandlungRückblick: Datenabruf