Templates

A template looks like a layout but gets a new instance on every navigation: state resets and effects run again. Use it for page-enter animations or for logging every page view.

app/template.tsx

'use client';

import { useEffect } from 'react';
import { usePathname } from 'next/navigation';

export default function Template({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  useEffect(() => {
    console.log('page view', pathname); // runs on every navigation
  }, [pathname]);

  return <div className="animate-fade-in">{children}</div>;
}