Клиентские компоненты в фреймворке NextJS

Давайте теперь переделаем наш серверный компонент на клиентский. Для этого напишем в начале файла компонента директиву 'use client':

'use client';

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

Теперь нам станут доступны стейты, создаваемые через useState. Давайте для примера создадим стейт и выведем его содержимое в верстке:

'use client';

import { useState } from 'react';

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

Сделайте клиентский компонент с двумя инпутами и кнопкой. Пусть в инпуты вводятся числа. По нажатию на кнопку выведите в абзац сумму введенных чисел.

Уберите директиву 'use client'. Убедитесь, что в этом случае NextJS выдаст ошибку про причине того, что нельзя использовать стейты внутри серверных компонентов.