Компонентҳои клиентӣ дар чарқфрамеи 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>;
}

Компоненти клиентиеро созед бо ду воридкунак (input) ва як тугма. Бигзор дар воридкунакҳо рақамҳо ворид карда шаванд. Бо пахш кардани тугма ҷамъи рақамҳои воридшударо дар абзас чоп кунед.

Директиваи 'use client'-ро тоза кунед. Боварӣ ҳосил кунед, ки дар ин ҳолат NextJS хато медиҳад, зеро истифодаи стейтҳо дар дохили компонентҳои серверӣ мумкин нест.