۱. template.tsx چیست؟
فایل template.tsx مشابه layout.tsx عمل میکند و صفحه یا layout را در خود میپیچد. اما برخلاف layout، در هر ناوبری مجدد با کلید یکتا بازسازی میشود و مؤلفههای کلاینتی داخل آن حالت خود را از دست میدهند.
۲. موارد استفاده از template
- بازنشانی حالت مؤلفههای کلاینتی مانند فیلدهای ورودی
- اجرای مجدد useEffect هنگام ناوبری
- نمایش fallback در هر ناوبری داخل Suspense
۳. نحوه تعریف template
فایل template.tsx باید یک کامپوننت React را بهصورت default export ارائه دهد و prop children را دریافت کند:
// app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
return <div>{children}</div>
}۴. جایگاه template در درخت رندر
template بین layout و صفحه قرار میگیرد و بهصورت خودکار با کلید یکتا رندر میشود:
<Layout>
<Template key={routeParam}>
{children}
</Template>
</Layout>۵. رفتار template در ناوبری
- بهصورت پیشفرض Server Component است
- در هر تغییر segment یا پارامتر داینامیک، template بازسازی میشود
- پارامترهای جستجو (searchParams) باعث بازسازی نمیشوند
- مؤلفههای کلاینتی داخل template حالت خود را از دست میدهند
- useEffect مجدد اجرا میشود
- DOM داخل template بهطور کامل بازسازی میشود
۶. مثالهای رفتاری در ناوبری
شروع از مسیر /
<RootLayout>
<Template key="/">
<Page />
</Template>
</RootLayout>ناوبری به /about
<RootLayout>
<Template key="/about">
<AboutPage />
</Template>
</RootLayout>ناوبری به /blog
<RootLayout>
<Template key="/blog">
<Template key="/blog">
<BlogIndexPage />
</Template>
</Template>
</RootLayout>ناوبری به /blog/first-post
<RootLayout>
<Template key="/blog">
<Template key="/blog/first-post">
<BlogPostPage slug="first-post" />
</Template>
</Template>
</RootLayout>ناوبری به /blog/second-post
<RootLayout>
<Template key="/blog">
<Template key="/blog/second-post">
<BlogPostPage slug="second-post" />
</Template>
</Template>
</RootLayout>جمعبندی
فایل template.tsx در Next.js ابزاری قدرتمند برای کنترل رفتار مؤلفهها در ناوبری است. با استفاده از کلیدهای یکتا، میتوانید مؤلفههای کلاینتی را بازنشانی کنید، اثرها را مجدد اجرا کنید، و تجربهای روان و قابل پیشبینی برای کاربر بسازید.