Riepilogo: layout
Fa parte della sezione Nozioni essenziali di Next.js del percorso React di Coddy. Lezione 16 di 47.
Sfida
MedioRiepilogo del capitolo: dai a Coddy Eats la sua struttura: una barra di navigazione condivisa e titoli reali per le schede.
- In
app/layout.jsx, all'interno di<body>e sopra{children}, aggiungi un<nav>conid="nav"che contenga un<Link>a/conid="home-link"e il testoHome, e un<Link>a/menuconid="menu-link"e il testoMenu. - Sempre nel layout, cambia il titolo di
metadataesattamente inCoddy Eats. - In
app/menu/page.jsx, esporta un oggettometadatacon il titoloOur Menu, così la scheda del menu avrà il proprio nome.
I test leggono il titolo della scheda in entrambe le pagine e verificano che la barra di navigazione sia ancora presente dopo aver raggiunto /menu.
Provalo tu
import './globals.css';
import Link from 'next/link';
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