Компонентҳои клиентӣ дар чарқфрамеи NextJS

Ҳоло биёед компоненти серверии худро ба клиентӣ табдил диҳем. Барои ин дар аввали файли компонент директиваи 'use client'-ро нависед:

src/app/test/page.jsx'use client';

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

Ҳоло ба мо стейтҳо дастрас мешаванд, ки тавассути useState сохта мешаванд. Биёед барои мисол стейт эҷод кунем ва мундариҷаи онро дар верстка чоп кунем:

src/app/test/page.jsx'use client';

import { useState } from 'react';

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

Задание 1

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

Задание 2

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