Rückblick: Server & Client
Teil des Abschnitts Next.js Essentials der React-Journey von Coddy. Lektion 22 von 47.
Aufgabe
MittelKapitelrückblick: Ziehe die Server-/Client-Grenze selbst.
Die Seite listet die Gerichte auf dem Server auf, setzt aber auch direkt ein onClick auf eine Schaltfläche, sodass die App überhaupt nicht gerendert wird. Behebe das ohne, die Seite als Client-Komponente zu markieren:
- Erstelle in
components/OpenHours.jsxeine Client-Komponente ('use client'in Zeile 1), die einen booleschen Wertopenim State speichert und eine Schaltfläche mitid="toggle"rendert. Ihr Text mussShow hourssein, wenn sie geschlossen ist, undHide hours, wenn sie geöffnet ist. - Wenn sie geöffnet ist, rendert sie außerdem ein
<p>mitid="hours"und dem TextOpen 9am-5pm. Wenn sie geschlossen ist, darf dieser Absatz nicht existieren. - Ersetze in
app/page.jsxdie fehlerhafte Schaltfläche und den immer sichtbaren Absatz durch<OpenHours />, importiert aus'../components/OpenHours'. Die Überschrift und die Gerichteliste bleiben exakt unverändert: 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 Zeile „use client“Client-Teile klein haltenServer innerhalb des ClientsRückblick: Server & Client7Clientseitige Navigation
Der aktive LinkProgrammatisches RoutingFiltern mit der URLRoute-HandlerRückblick: Navigation