Die Zeile „use client“

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 enthält eine Zeile 'use client' an der falschen Stelle. Die App schlägt trotzdem mit dem Hook-Fehler fehl.

Verschiebe 'use client'; an die erste Zeile von components/Counter.jsx, vor den Import.

Beide Komponenten in dieser Datei, Counter und die von ihr gerenderte Komponente ResetButton, werden durch diese eine Zeile zu Client-Komponenten. 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>
    );
}