Die 'use client'-Zeile

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

'use client' sieht aus wie ein verirrter String, den jemand zu löschen vergessen hat. Das ist es nicht: Es ist eine Direktive, und sie hat zwei Regeln, die man sich merken sollte, weil beide einen sonst unvorbereitet treffen können.

Regel 1: Es muss die erste Zeile sein

Vor den Imports. Vor Kommentaren, auf die es ankommt. Das allererste in der Datei:

'use client';

import { useState } from 'react';

Platzieren Sie sie unter einem import, hört sie auf, eine Direktive zu sein: Sie wird zu einem nutzlosen String-Ausdruck, die Datei bleibt eine Serverkomponente, und Sie erhalten den Hook-Fehler, als hätten Sie sie nie eingegeben. Das kostet Leute echt Zeit, weil die Zeile genau dort in der Datei steht und richtig aussieht.

Regel 2: Es markiert die gesamte Datei

Es gibt keine Möglichkeit, eine einzelne Komponente zu markieren. Wenn eine Datei die Direktive enthält, ist alles, was darin definiert ist, client-seitiger Code:

'use client';

function Row() { … }        // Client
export default function Table() { … }   // auch Client

Und es breitet sich nach unten aus: Alles, was eine Client-Komponente importiert und rendert, wird ebenfalls zu Client-Code. Eine einzige Direktive am Anfang einer großen Datei kann stillschweigend sehr viel JavaScript an den Browser senden – genau das Problem, das die nächste Lektion löst.

Aufgabe

Einfach

components/Counter.jsx hat eine 'use client'-Zeile an der falschen Stelle. Die Anwendung schlägt trotzdem mit dem Hook-Fehler fehl.

Verschiebe 'use client';, sodass es die erste Zeile von components/Counter.jsx ist, oberhalb des import.

Beide Komponenten in dieser Datei, Counter und der von ihr gerenderte ResetButton, werden durch diese eine Zeile zu Client Components. Du benötigst keine zweite Direktive und solltest auch keine hinzufügen.

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