template.tsx in Next.js — Resetting Client State with Unique Keys

1. What Is template.tsx?

template.tsx is a special file in Next.js that wraps a layout or page, similar to layout.tsx. However, unlike layouts, templates remount on every navigation due to being assigned a unique key.

2. When to Use a Template

• To reset the state of Client Components (e.g. input fields)
• To re-run useEffect on navigation
• To show Suspense fallbacks on every route change

3. Defining a Template

Create a template.tsx file and export a default React component that accepts a children prop:

// app/template.tsx
export default function Template({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>
}

4. Where Templates Render

Templates are rendered between the layout and its children, and are automatically assigned a unique key:

<Layout>
  <Template key={routeParam}>
    {children}
  </Template>
</Layout>

5. Template Behavior on Navigation

• Templates are Server Components by default
• They remount when their segment or dynamic params change
• They do not remount on search param changes
• Client Components inside reset their state
• useEffect re-runs on remount
• DOM inside the template is fully recreated

6. Navigation Examples

Starting at /

<RootLayout>
  <Template key="/">
    <Page />
  </Template>
</RootLayout>

Navigating to /about

<RootLayout>
  <Template key="/about">
    <AboutPage />
  </Template>
</RootLayout>

Navigating to /blog

<RootLayout>
  <Template key="/blog">
    <Template key="/blog">
      <BlogIndexPage />
    </Template>
  </Template>
</RootLayout>

Navigating to /blog/first-post

<RootLayout>
  <Template key="/blog">
    <Template key="/blog/first-post">
      <BlogPostPage slug="first-post" />
    </Template>
  </Template>
</RootLayout>

Navigating to /blog/second-post

<RootLayout>
  <Template key="/blog">
    <Template key="/blog/second-post">
      <BlogPostPage slug="second-post" />
    </Template>
  </Template>
</RootLayout>

Conclusion

template.tsx in Next.js is a powerful tool for controlling component behavior during navigation. By remounting with a unique key, it resets Client Component state, re-runs effects, and ensures a fresh UI experience on every route change.