კლიენტური კომპონენტები 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 გამოიტანს შეცდომას, რადგანაც სტეიტების გამოყენება არ შეიძლება სერვერულ კომპონენტებში.