6. Next.js Client Components
📘 কনসেপ্ট (থিওরি)
ক্লায়েন্ট কম্পোনেন্টগুলো (Client Components) আপনাকে ইন্টারঅ্যাকটিভ ইউআই লিখতে দেয় যা ক্লায়েন্টে (ব্রাউজারে) রেন্ডার করা হয়।
একটি ক্লায়েন্ট কম্পোনেন্ট ব্যবহার করতে, আপনাকে অবশ্যই আপনার ফাইলের একেবারে ওপরে
"use client" নির্দেশিকা (directive) যোগ করে স্পষ্টভাবে সম্মতি (opt-in) দিতে হবে।
কখন ক্লায়েন্ট কম্পোনেন্ট ব্যবহার করবেন?
- ইন্টারঅ্যাকটিভিটি এবং ইভেন্ট লিসেনার (যেমন onClick, onChange)
- স্টেট (State) এবং লাইফসাইকেল ইফেক্ট (Lifecycle Effects) ব্যবহার করা (যেমন useState, useEffect)
- শুধুমাত্র ব্রাউজারের এপিআই (APIs) ব্যবহার করা।💡 উদাহরণ
ক্লায়েন্ট কম্পোনেন্ট ঘোষণা করা:
"use client"
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
)
}
Count: {count}
🎯 আপনার কাজ (প্র্যাকটিস)
InteractiveButton নামের একটি ক্লায়েন্ট কম্পোনেন্ট লিখুন। "use client" নির্দেশিকা অন্তর্ভুক্ত করতে ভুলবেন না। কম্পোনেন্টটির একটি onClick আছে যা "Hello" অ্যালার্ট দেয়।main.nextjs
Loading...
OUTPUT
Run your code to see the output here...