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 сервер компонентлари ичида стейтлардан фойдаланиш мумкин эмаслиги ҳақида хатолик берганига ишонч ҳосил қилинг.