Den Fehler lesen

Teil des Abschnitts Next.js Essentials der React-Journey von Coddy — Lektion 18 von 47.

Sie werden der Server/Client-Grenze begegnen, lange bevor Sie sie vollständig verstehen, und Sie werden ihr als Fehlermeldung begegnen. Das ist völlig in Ordnung. Framework-Fehler sind keine Strafe; sie sind der schnellste Weg, die Regeln zu lernen.

Hier ist der Fehler, auf den Sie zuerst stoßen werden. Eine Seite verwendet useState, die App weigert sich zu rendern und die Laufzeitumgebung meldet:

You're importing a component that needs a
React hook (in <Home>). Hooks only work in Client
Components. To fix this, add "use client" to the top
of the file.

Lösen Sie es so, wie Sie die Nachricht eines Kollegen lesen würden, in drei Teilen:

Was ist kaputt gegangen: eine Komponente benötigt einen React-Hook
Wo: <Home>, damit Sie wissen, welche Komponente Sie öffnen müssen
Die Regel und die Lösung: Hooks funktionieren nur in Client-Komponenten; fügen Sie "use client" hinzu

Eine gute Framework-Fehlermeldung nennt die Regel, die Sie verletzt haben. Überfliegen Sie sie nur, werden Sie zwanzig Minuten lang raten; lesen Sie sie aufmerksam, sind Sie in zwanzig Sekunden fertig. Dies ist eine Fähigkeit, die es sich bewusst zu üben lohnt, denn sie unterscheidet diejenigen, die Freude an einem neuen Framework haben, von denen, die damit kämpfen.

Zeit, selbst einen zu beheben.

Aufgabe

Anfänger

Diese Zähler-Seite ist defekt. Führe sie aus und lies, was die Runtime sagt.

Die Seite ruft useState auf, aber sie ist eine Server Component, und Hooks funktionieren nur in Client Components.

Tue genau das, was der Fehler verlangt: Markiere app/page.jsx als Client Component.
Ändere sonst nichts: Die Zähler-Logik ist bereits korrekt.

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>
    );
}