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.

Lies es so, wie du eine Notiz von einem Kollegen lesen würdest, in drei Teilen:

Was kaputtgegangen ist: Eine Komponente benötigt einen React-Hook
Wo: <Home>, damit du weißt, welche Komponente du öffnen musst
Die Regel und die Lösung: Hooks funktionieren nur in Client-Komponenten; füge "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ählerseite ist fehlerhaft. Führe sie aus und lies, was die Laufzeitumgebung meldet.

Die Seite ruft useState auf, ist aber eine Server-Komponente, und Hooks funktionieren nur in Client-Komponenten.

Tu genau, was der Fehler verlangt: Kennzeichne app/page.jsx als Client-Komponente.
Ändere nichts anderes: Die Logik des Zählers 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>
    );
}