Schritt 1: Das Grundgerüst
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 39 von 47.
Aufgabe
EinfachBaue das Shell-Layout in app/layout.jsx.
- Importiere
./globals.cssundLinkausnext/link. - Exportiere
metadatamit einemtitle-Objekt:defaultaufCoddy Eatsundtemplateauf%s | Coddy Eats. - Füge innerhalb von
<body>ein<nav className="nav">ein, das drei Links enthält:className="brand"zu/mit dem TextCoddy Eats,id="nav-menu"zu/mit dem TextMenuundid="nav-desserts"zu/?category=dessertmit dem TextDesserts. - Ummantele
{children}unterhalb der Navigationsleiste mit einem<div className="container">.
Probier es selbst
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: Navigation