একটি 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 করবে, যা অবশ্যই একটি children prop গ্রহণ করবে। (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-এর মাধ্যমে একটি ইন্টারেক্টিভ অংশ দেখানো হবে?

Projukti Solution Bd

template in next js 16

কনভেনশন (Convention)

Props

আচরণ (Behavior)

ব্যবহারিক উদাহরণ

সংক্ষিপ্ত তুলনা: Layout vs Template