Client-Komponenten im NextJS-Framework

Lassen Sie uns nun unsere Server- Komponente in eine Client-Komponente umwandeln. Dafür schreiben wir am Anfang der Komponentendatei die Direktive 'use client':

'use client';

export default function Test() {
	return <h1>hello, user!</h1>;
}

Nun werden uns States zugänglich, die via useState erstellt werden. Lassen Sie uns zur Veranschaulichung einen State erstellen und dessen Inhalt im Markup ausgeben:

'use client';

import { useState } from 'react';

export default function Test() {
	let [name, setName] = useState('user');
	return <h1>hello, {name}!</h1>;
}

Erstellen Sie eine Client-Komponente mit zwei Input-Feldern und einem Button. Es sollen Zahlen in die Input-Felder eingegeben werden können. Bei Klick auf den Button geben Sie in einem Absatz die Summe der eingegebenen Zahlen aus.

Entfernen Sie die Direktive 'use client'. Stellen Sie sicher, dass NextJS in diesem Fall einen Fehler ausgibt, weil States nicht in Server-Komponenten verwendet werden können.