Rückblick: 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"hinzu, 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 Titel von
metadataexakt inCoddy Eats. - Exportiere in
app/menu/page.jsxeinmetadata-Objekt mit dem TitelOur Menu, damit der Menü-Tab seinen eigenen Namen trägt.
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 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: Routing
3Layouts & Metadaten
Das Root-LayoutGemeinsame NavigationVerschachtelte LayoutsSeitenmetadatenDynamische MetadatenRückblick: Layouts