3. Next.js Pages and Layouts
📘 কনসেপ্ট (থিওরি)
পেজ এবং লেআউট (Pages and Layouts) হলো রাউটিংয়ের মূল অংশ।
- **পেজ (Page)**: পেজ হলো একটি ইউআই (UI) যা একটি রাউটের জন্য অনন্য। আপনি একটি
page.js ফাইল থেকে একটি কম্পোনেন্ট এক্সপোর্ট করে একটি পেজ সংজ্ঞায়িত করেন।
- **লেআউট (Layout)**: লেআউট হলো একটি ইউআই যা একাধিক রাউটের মধ্যে শেয়ার করা হয়। নেভিগেশনের সময়, লেআউটগুলো স্টেট ধরে রাখে, ইন্টারঅ্যাকটিভ থাকে এবং পুনরায় রেন্ডার (re-render) হয় না。
আপনি একটি layout.js ফাইল থেকে একটি রিঅ্যাক্ট কম্পোনেন্ট ডিফল্ট এক্সপোর্ট করে একটি লেআউট সংজ্ঞায়িত করতে পারেন। কম্পোনেন্টটির একটি children প্রপ (prop) গ্রহণ করা উচিত।💡 উদাহরণ
একটি লেআউট কম্পোনেন্ট:
// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
🎯 আপনার কাজ (প্র্যাকটিস)
একটি লেআউট কম্পোনেন্ট
BlogLayout লিখুন যা প্রপ হিসেবে children নেয় এবং একটি রিটার্ন করে যার মধ্যে Blog Header children থাকে।main.nextjs
Loading...
OUTPUT
Run your code to see the output here...