Client-side componenten in het NextJS-framework

Laten we nu onze server-side component omzetten naar een client-side component. Hiervoor schrijven we bovenaan het componentbestand de directive 'use client':

'use client';

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

Nu worden states voor ons beschikbaar, aangemaakt via useState. Laten we als voorbeeld een state aanmaken en de inhoud ervan weergeven in de opmaak:

'use client';

import { useState } from 'react';

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

Maak een client-side component met twee invoervelden en een knop. Laat in de invoervelden getallen worden ingevoerd. Bij het klikken op de knop geef je in een paragraaf de som van de ingevoerde getallen weer.

Verwijder de directive 'use client'. Zorg ervoor dat NextJS in dit geval een foutmelding geeft vanwege het feit dat states niet kunnen worden gebruikt in server-side componenten.