app/layout.tsx – Șabloane de structură persistente (RootLayout și Nested Layouts) în Next.js

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ro">
      <body>{children}</body>
    </html>
  );
}

Ce face app/layout.tsx - Șabloane de structură persistente (RootLayout și Nested Layouts)

În arhitectura App Router, fișierul layout.tsx din rădăcina directorului `app/` este obligatoriu și definește tag-urile de bază `` și ``.

Layout-urile sunt imbricate (nested): un folder `app/dashboard/layout.tsx` va împacheta toate paginile din interiorul său fără a re-randa componentele din `app/layout.tsx`.

La navigarea între pagini din același layout, componentele din layout NU se re-montează și nu își pierd starea (de exemplu un player audio continuă să cânte, un input text nu se resetează).

Exemple

Exemplul 1: Structura standard a unui RootLayout cu bară de navigare și subsol

Include componente partajate pe tot site-ul.

import Navigation from '@/components/Navigation';
import Footer from '@/components/Footer';
import './globals.css';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ro">
      <body className="bg-gray-50 text-gray-900">
        <Navigation />
        <main className="container mx-auto px-4 py-8">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

Ieșire în terminal

Toate paginile vor moșteni structura cu Navigation și Footer.

Greșeli frecvente

• Încercarea de a transmite date prin props de la Layout către copiii din `children`; pentru a partaja date se folosește React Context în Client Components sau apeluri fetch partajate prin cache în Server Components.

Comenzi înrudite

• 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.
• app/template.tsx - Reinițializarea stării la navigare: Similar cu un Layout, dar creează o instanță nouă pentru fiecare pagină vizitată, resetând starea și re-executând efectele.
• app/loading.tsx - Stări de încărcare instantanee (React Suspense): Afișează automat un ecran schelet (skeleton UI) sau indicator de progres în timp ce datele paginii sunt descărcate pe server.