Passaggio 1: La struttura
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 39 di 47.
Sfida
FacileCrea la struttura in app/layout.jsx.
- Importa
./globals.csseLinkdanext/link. - Esporta
metadatacon un oggettotitle:defaultdiCoddy Eatsetemplatedi%s | Coddy Eats. - All'interno di
<body>, aggiungi un<nav className="nav">che contenga tre link:className="brand"a/con il testoCoddy Eats,id="nav-menu"a/con il testoMenueid="nav-desserts"a/?category=dessertcon il testoDesserts. - Sotto il nav, racchiudi
{children}in un<div className="container">.
Provalo tu
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