dexblog.ro
Acces rapid: Învață AI Învață Programare Specificații Dispozitive Comparații
NEX Toate comenzile Next.js

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

Structură App Router și Fișiere Speciale Next.js 13+ (App Router)

Similar cu un Layout, dar creează o instanță nouă pentru fiecare pagină vizitată, resetând starea și re-executând efectele.

Sintaxă 
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