Overview

template.tsx sits between the layout chain and the page. Like layout.tsx, it is a special file and does not create a URL. Unlike a layout, it is resolved per page scope and is a good place for effects that should run when navigating between pages.

What is template.tsx?

A template.tsx file wraps each page in its scope. The nearest template with a default export is used (nearest-wins, same as loading and error).

template.tsx vs layout.tsx

Creating a Template

Create template.tsx in any folder. It must have a default export and receives children.

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

export default function Template({
  children,
}: {
  children: React.ReactNode
}) {
  useEffect(() => {
    // Useful for analytics or focus management
    console.log('Template active')
  }, [])

  return <div>{children}</div>
}

export default function DashboardTemplate({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="animate-in fade-in">
      {children}
    </div>
  )
}

Use Cases

Prefer a template when you need page-scoped behavior without changing the persistent layout chrome.

File Naming - templates.tsx

On this docs site, the page file is named templates.tsx (plural) so it is not treated as the special template.tsx convention. The real special file in apps remains template.tsx.

Complete Example

Templates next to layouts, loading, and error - special files do not create URLs.