Riepilogo: recupero dei dati
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 28 di 47.
Sfida
MedioRiepilogo del capitolo: un menu che carica tutto sul server.
lib/data.js è fornito e bloccato: getDishes() restituisce una promise per un array di oggetti { id, name, price }, e getDish(slug) ne cerca uno.
- In
app/page.jsx, rendiHomeuna funzioneasynce usaawait getDishes()per assegnare il risultato a una variabiledishes. - All'interno di
<ul id="dish-list">, visualizza un<li>per ogni piatto, conkey={dish.id},id={dish.id}e ilnamedel piatto come testo. app/menu/[slug]/page.jsxmostraUnknown dishper ogni URL: destrutturaparamssenza usare await. Usa await conparamsaffinché la ricerca riceva uno slug reale. Visitando/menu/carbonara, in#dish-namedeve apparireCarbonarae in#dish-priceil suo prezzo.
Provalo tu
import './globals.css';
export const metadata = {
title: 'My App',
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}Tutte le lezioni di Nozioni essenziali di Next.js
4Server e Client
Due tipi di componentiLeggere l'erroreLa riga 'use client'Mantieni piccole le parti ClientServer dentro ClientRiepilogo: Server e Client7Navigazione lato client
Il link attivoRouting programmaticoFiltrare con l'URLGestori delle routeRiepilogo: navigazione2Routing e collegamenti
Le cartelle sono routeRoute annidateCollegare le pagineRoute dinamichePagine non trovateRiepilogo: routing5Dati sul server
Componenti asincroniIn attesa dei parametri della routeDue fetch contemporaneiStati di caricamentoGestione degli erroriRiepilogo: recupero dei dati8Progetto: Coddy Eats
Passaggio 1: La struttura
Passaggio 2: La griglia del menuPassaggio 3: Le pagine dei piattiPassaggio 4: Stato di caricamentoPassaggio 5: Titoli delle paginePassaggio 6: Aggiungi al carrelloPassaggio 7: Filtro per categoriaPassaggio 8: Lascia una recensionePassaggio 9: Ricerca in tempo reale