Zusammenfassung: Server & Client
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 22 von 47.
Aufgabe
MittelKapitelzusammenfassung: Ziehen Sie die Server/Client-Grenze selbst.
Die Seite listet Gerichte auf dem Server auf, platziert aber auch ein onClick direkt auf einen Button, sodass die App überhaupt nicht rendert. Beheben Sie das, ohne die Seite als Client-Komponente zu markieren:
- Bauen Sie in
components/OpenHours.jsxeine Client-Komponente ('use client'in Zeile 1), die einenopen-Boolean im State hält und einen Button mitid="toggle"rendert. Sein Text mussShow hourssein, wenn er geschlossen ist, undHide hours, wenn er geöffnet ist. - Wenn geöffnet, rendert sie auch ein
<p>mitid="hours"und dem TextOpen 9am-5pm. Wenn geschlossen, darf dieser Absatz nicht existieren. - Ersetzen Sie in
app/page.jsxden fehlerhaften Button und den immer sichtbaren Absatz durch<OpenHours />, importiert aus'../components/OpenHours'. Die Überschrift und die Gerichteliste bleiben genau so, wie sie sind: Die Seite bleibt eine Server-Komponente.
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: Navigation