---
title: template.js
description: API Reference for the template.js file.
url: "https://nextjs.org/docs/15/app/api-reference/file-conventions/template"
docs_index: /docs/15/llms.txt
lastUpdated: 2025-06-16
prerequisites:
  - "API Reference: /docs/15/app/api-reference"
  - "File-system conventions: /docs/15/app/api-reference/file-conventions"
---

> For an index of all documentation, see [/docs/15/llms.txt](/docs/15/llms.txt).

A **template** file is similar to a [layout](/docs/app/getting-started/layouts-and-pages#creating-a-layout) in that it wraps a layout or page. Unlike layouts that persist across routes and maintain state, templates are given a unique key, meaning children Client Components reset their state on navigation.

They are useful when you need to:

- Resynchronize `useEffect` on navigation.
- Reset the state of a child Client Components on navigation. For example, an input field.
- To change default framework behavior. For example, Suspense boundaries inside layouts only show a fallback on first load, while templates show it on every navigation.

## Convention

A template can be defined by exporting a default React component from a `template.js` file. The component should accept a `children` prop.

![template.js special file](/docs/light/template-special-file.png)

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

```jsx title="app/template.js" 
export default function Template({ children }) {
  return <div>{children}</div>
}
```

In terms of nesting, `template.js` is rendered between a layout and its children. Here's a simplified output:

```jsx title="Output"
<Layout>
  {/* Note that the template is given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>
```

## Props

### `children` (required)

Template accepts a `children` prop.

```jsx title="Output"
<Layout>
  {/* Note that the template is automatically given a unique key. */}
  <Template key={routeParam}>{children}</Template>
</Layout>
```

## Behavior

- **Server Components**: By default, templates are Server Components.
- **Remount on navigation**: Templates receive a unique key automatically. Navigating to a new route causes the template and its children to remount.
- **State reset**: Any Client Component inside the template will reset its state on navigation.
- **Effect re-run**: Effects like `useEffect` will re-synchronize as the component remounts.
- **DOM reset**: DOM elements inside the template are fully recreated.

## Version History

| Version   | Changes                |
| --------- | ---------------------- |
| `v13.0.0` | `template` introduced. |

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/docs/15/llms.txt](/docs/15/llms.txt)