Zusammenfassung: Routing
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy. Lektion 10 von 47.
Aufgabe
MittelKapitelzusammenfassung: 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 component 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 componentasync, 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 unterschiedliche Ü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 '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