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 একটি ত্রুটি দেখায়, কারণ সার্ভার কম্পোনেন্টের ভিতরে স্টেট ব্যবহার করা যায় না।