app/template.tsx – Reinițializarea stării la navigare în Next.js

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

Ce face app/template.tsx - Reinițializarea stării la navigare

Spre deosebire de un `layout.tsx` (care persistă peste navigări și nu se re-randează), un template.tsx este re-creat de la zero de fiecare dată când utilizatorul schimbă ruta.

Este util pentru cazuri speciale precum: animații CSS de intrare/ieșire de pagină (Page Transitions cu Framer Motion), resetarea stărilor locale sau logarea evenimentelor de vizualizare cu `useEffect` la fiecare schimbare de URL.

Exemple

Exemplul 1: Adăugarea unei animații de tranziție între pagini cu template.tsx

Re-rulează animația CSS la fiecare schimbare de pagină.

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <div className="transition-opacity duration-300 ease-in-out opacity-100">
      {children}
    </div>
  );
}

Ieșire în terminal

Efectul vizual este re-executat la fiecare navigare.

Greșeli frecvente

• Folosirea template.tsx în locul lui layout.tsx fără un motiv clar, provocând re-randări inutile și scăderea performanței.

Comenzi înrudite

• app/layout.tsx - Șabloane de structură persistente (RootLayout și Nested Layouts): Definește structura grafică comună partajată între mai multe pagini (antet, meniu, subsol) ce își păstrează starea la navigare.
• app/page.tsx - Definirea conținutului specific al unei rute: Fișierul special care face ca un segment de rută să fie accesibil public printr-un URL în browser.