What is the difference between a layout and a template in the Next.js App Router?

A layout preserves its state and does not re-render when navigating between pages that share it, while a template, defined in a template.js file, creates a fresh instance and re-renders every time you navigate, which is useful when you want an animation or effect to run again on every page change.

// app/blog/template.js
export default function BlogTemplate({ children }) {
  return <div className="fade-in">{children}</div>;
}