Composants clients dans le framework NextJS

Maintenant, transformons notre composant serveur en composant client. Pour cela, écrivons la directive 'use client' au début du fichier du composant :

'use client';

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

Maintenant, les états créés via useState nous deviendront accessibles. Créons un état à titre d'exemple et affichons son contenu dans le rendu :

'use client';

import { useState } from 'react';

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

Créez un composant client avec deux champs de saisie et un bouton. Laissez les nombres être saisis dans les champs. Lorsqu'on clique sur le bouton, affichez dans un paragraphe la somme des nombres saisis.

Supprimez la directive 'use client'. Assurez-vous que dans ce cas NextJS affichera une erreur en raison du fait qu'il est impossible d'utiliser les états à l'intérieur des composants serveurs.