Componenti Client nel Framework NextJS

Ora riconvertiamo il nostro componente server in un componente client. Per fare ciò, scriviamo la direttiva 'use client' all'inizio del file del componente:

'use client';

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

Ora avremo accesso agli stati, creati tramite useState. Creiamo uno stato a titolo di esempio e visualizziamone il contenuto nel markup:

'use client';

import { useState } from 'react';

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

Create un componente client con due input e un pulsante. Nei input devono essere inseriti numeri. Alla pressione del pulsante, visualizzate in un paragrafo la somma dei numeri inseriti.

Rimuovete la direttiva 'use client'. Assicuratevi che in questo caso NextJS visualizzi un errore a causa dell'impossibilità di utilizzare gli stati all'interno dei componenti server.