Template

1
export default function Template({ children }: { children: React.ReactNode }) {
2
  return (
3
    <div className="animate-fade-in">
4
      {/* Re-runs on every navigation */}
5
      {children}
6
    </div>
7
  );
8
}

Layout vs Template

Demo

1. Navigate between categories and notice the entrance animation replays.
2. Interact with any stateful elements then navigate away and back.
3. Compare with the layouts demo where state persists across navigation.

Visual Summary

Key Takeaways

Pitfalls and Tips

• Avoid unnecessary templates; the remount cost adds up in complex UIs.
• Keep template components lightweight to minimize remount overhead.
• Use templates for page transitions, not for state management workarounds.

Learn More

• Templates
• Layouts vs Templates