Rückblick: Routing
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy. Lektion 10 von 47.
Aufgabe
MittelKapitelrückblick: Verwandle eine einseitige App in eine kleine Website und verwende dabei alles aus diesem Kapitel.
- In
app/about/page.jsx(bereits in der Dateiliste vorhanden) soll die Komponente ein<h1>mitid="about-title"und dem exakten TextAbout uszurückgeben. - Importiere in
app/page.jsxLinkausnext/linkund füge einen Link zu/aboutmitid="to-about"hinzu. - Die dynamische Route
app/menu/[slug]/page.jsxist bereits vorhanden, zeigt aber immerpizzaan. Mache ihre Komponenteasync, sodass sie aufparamswartet und den passendensluginnerhalb eines<h1>mitid="dish"rendert.
Die Tests klicken auf deinen Link, besuchen anschließend zwei verschiedene Gerichte und erwarten zwei verschiedene Überschriften.
Probier es selbst
import './globals.css';
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