`template.js`

Like a layout but creates a new instance on every navigation.

Since Next 13 (App Router) Spec ↗

Syntax

export default function Template({ children }) { return children }

Parameters

Name	Type	Required	Description
`children`	`ReactNode`	Yes	The page or nested layout being rendered.

Returns

ReactNode — A fresh wrapper instance per navigation.

Examples

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

'use client'
import { motion } from 'framer-motion'

// Re-runs enter animation on every route change
export default function Template({ children }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    >
      {children}
    </motion.div>
  )
}

Notes

Unlike `layout.js`, a `template.js` remounts on every navigation: state is reset, effects re-run, and DOM is recreated. Use it for enter/exit animations, per-navigation logging, or features depending on `useEffect` running per route. Otherwise prefer `layout.js`.