Клиентски компоненти в рамката NextJS

Нека сега преработим нашия сървърен компонент в клиентски. За това ще напишем в началото на файла на компонента директивата 'use client':

'use client';

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

Сега ще станат достъпни състоянията, създавани чрез useState. Нека за пример създадем състояние и изведем неговото съдържание в markup-а:

'use client';

import { useState } from 'react';

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

Направете клиентски компонент с два input полета и бутон. Нека в input полетата се въвеждат числа. При натискане на бутона изведете в абзац сумата на въведените числа.

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