template.tsx در Next.js — بازنشانی مؤلفه‌ها در ناوبری با کلیدهای یکتا

۱. 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 ابزاری قدرتمند برای کنترل رفتار مؤلفه‌ها در ناوبری است. با استفاده از کلیدهای یکتا، می‌توانید مؤلفه‌های کلاینتی را بازنشانی کنید، اثرها را مجدد اجرا کنید، و تجربه‌ای روان و قابل پیش‌بینی برای کاربر بسازید.