Zusammenfassung: Layouts
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 16 von 47.
Aufgabe
MittelKapitelzusammenfassung: Gib Coddy Eats sein Grundgerüst: eine gemeinsame Navigation und echte Tab-Titel.
- Füge in
app/layout.jsxinnerhalb von<body>und oberhalb von{children}ein<nav>mitid="nav"ein, das einen<Link>zu/mitid="home-link"und dem TextHomesowie einen<Link>zu/menumitid="menu-link"und dem TextMenuenthält. - Ändere, ebenfalls im Layout, den
metadata-Titel in genauCoddy Eats. - Exportiere in
app/menu/page.jsxeinmetadata-Objekt mit dem TitelOur Menu, damit sich der Menü-Tab selbst benennt.
Die Tests lesen den Tab-Titel auf beiden Seiten aus und prüfen, ob die Navigation nach dem Wechsel zu /menu weiterhin vorhanden ist.
Probier es selbst
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>
);
}Alle Lektionen in Next.js Essentials
4Server & Client
Zwei Arten von KomponentenDen Fehler lesenDie 'use client'-ZeileClient-Teile klein haltenServer innerhalb von ClientZusammenfassung: Server & Client7Client-seitige Navigation
Der aktive LinkProgrammatisches RoutingFiltern mit der URLRoute-HandlerZusammenfassung: Navigation2Routing & Links
Ordner sind RoutenVerschachtelte RoutenSeiten verlinkenDynamische RoutenNicht-gefunden-SeitenZusammenfassung: Routing
3Layouts & Metadaten
Das Root-LayoutGemeinsame NavigationVerschachtelte LayoutsSeiten-MetadatenDynamische MetadatenZusammenfassung: Layouts