-
একটি template ফাইল অনেকটা layout’এর মতোই — অর্থাৎ এটি একটি উপাদানকে ঘিরে (wrap) রাখে, যেমন layout বা পেজ। (Next.js)
-
তবে বড় পার্থক্য হচ্ছে — layout গুলো রুট পরিবর্তনের সময় অবিচ্ছিন্ন থাকে (persistent), আর template গুলোকে একটি unique key দেওয়া হয়। অর্থাৎ, route পরিবর্তন হলে template এবং তার children পুনরায় মাউন্ট (remount) হবে। (Next.js)
-
ফলে, template খুব উপকারী যখন তুমি চাও:
• নেভিগেশন ঘটতে গিয়েuseEffectবা অন্যান্য React effect গুলো আবার চলুক,
• Client Components-এর state রিসেট হোক,
• ফার্স্ট লোডের পরে Suspense fallback না দেখিয়ে প্রতিবার নেভিগেশনে fallback দেখান। (Next.js)
কনভেনশন (Convention)
-
তোমরা একটি
template.js(বাtemplate.tsx) ফাইল তৈরি করবে। (Next.js) -
ওই ফাইলে একটি React কম্পোনেন্ট export করবে, যা অবশ্যই একটি
childrenprop গ্রহণ করবে। (Next.js) -
উদাহরণ:
// app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}
-
লেআউট ও তার children-এর মধ্যে template রেন্ডার হবে, অর্থাৎ রূপান্তর হবে এভাবে:
<Layout> <Template key={routeParam}> {children} </Template> </Layout>এখানে
key={routeParam}দ্বারা নিশ্চিত হবে যে প্রতিটি রুট-মানের জন্য template নতুনভাবে মাউন্ট হবে। (Next.js)
Props
-
children — template কম্পোনেন্টের জন্য একমাত্র প্রয়োজনীয় prop। (Next.js)
-
template নিজেই সাধারণত Server Component হিসেবে কাজ করে। (Next.js)
আচরণ (Behavior)
Template-এর ক্ষেত্রে কিছু বিশেষ আচরণ আছে, যা layout থেকে আলাদা:
| আচরণ | বর্ণনা |
|---|---|
| Remount on navigation | যেকোনো নতুন রুটে যাওয়ার সময় template এবং তার children পুনরায় মাউন্ট (remount) হবে, কারণ template-কে একটি unique key দেওয়া হয়। (Next.js) |
| State reset | Template-এর ভিতরে থাকা Client Components-এর state রিসেট হবে রাউট পরিবর্তনে। (Next.js) |
| Effect rerun | useEffect বা অন্যান্য effect গুলো পুনরায় চলবে কারণ component পুনরায় তৈরি হবে। (Next.js) |
| DOM recreation | template এর অন্তर्गत DOM এলিমেন্টগুলো পুরোটিই নতুনভাবে তৈরি হবে (old ones মুছে ফেলা হবে) (Next.js) |
ব্যবহারিক উদাহরণ
নিচে এমন একটি উদাহরণ যেখানে আমরা একটি template.tsx ব্যবহার করছি:
// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
// app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
return (
<div className="template-wrapper">
{children}
</div>
);
}
// app/page.tsx
export default function Page() {
return <p>এইটা হলো homepage content</p>;
}
রাউট / এ গেলে রেন্ডার হবে:
<RootLayout>
<Template key={…}>
<Page />
</Template>
</RootLayout>
রাউট পরিবর্তন করলে (যেমন /about) Template কম্পোনেন্ট নতুনভাবে মাউন্ট হবে, এর ফলে
-
সব Client Component state রিসেট হবে,
-
useEffectগুলো আবার চলবে, -
Suspense fallback পুনরায় দেখাবে।
সংক্ষিপ্ত তুলনা: Layout vs Template
| বিষয় | Layout | Template |
|---|---|---|
| Persistency | রাউট পরিবর্তন হলেও থাকে | প্রতিটি নেভিগেশনে পুনরায় তৈরি হয় |
| Key | সাধারণত key দেওয়া হয় না | unique key দেওয়া হয় (route-based) |
| State | state ধরে রাখতে পারে | state রিসেট করে |
| Effects | প্রথম লোডে effect চালায় | প্রতিবার নেভিগেশনে effect চালায় |
এই ছিল Next.js এর template ফাইল-কনভেনশন সম্পর্কে সংক্ষিপ্ত ও পরিষ্কার ব্যাখ্যা।
চাও কি, আমি এখন template + layout একসাথে একটি বড় উদাহরণ তৈরি করি যেখানে template-এর মাধ্যমে একটি ইন্টারেক্টিভ অংশ দেখানো হবে?