Ένα layout είναι κοινόχρηστη διεπαφή που περιτυλίγει πολλές σελίδες και παραμένει κατά τη διαδρομή πλοήγησης — δεν εξαναγκάζεται να ξανασχεδιαστεί ή να χάσει κατάσταση όταν μετακινηθείς μεταξύ θυγατρικών διαδρομών. Το ορίζεις με ένα αρχείο layout.tsx.
() {
(
);
}
Κάθε εφαρμογή App Router πρέπει να έχει ένα root layout — αντικαθιστά τα παλιά _app.tsx/_document.tsx.
Τα layouts ενθέτονται κατά μήκος της δομής φακέλου, οπότε κάθε ενότητα μπορεί να προσθέσει τη δική της μόνιμη περιτύλιξη:
app/layout.tsx → wraps everything (header/footer)
app/dashboard/layout.tsx → wraps all /dashboard/* pages (adds a sidebar)
app/dashboard/settings/page.tsx → rendered inside BOTH layouts
// app/dashboard/layout.tsx — only wraps dashboard routes
export default function DashboardLayout({ children }) {
return (
<div className="flex">
<Sidebar /> {/* stays mounted as you move within /dashboard */}
<main>{children}</main>
</div>
);
}
Όταν πλοηγηθείς από /dashboard/settings σε /dashboard/billing, το dashboard layout (και το <Sidebar> του) παραμένει τοποθετημένο — η κατάστασή του (θέση κύλισης, ανοιχτά μενού, είσοδος φόρμας) διατηρείται και μόνο το περιεχόμενο της σελίδας αλλάζει. Αυτό είναι πιο αποδοτικό και δίνει μια πιο ομαλή εμπειρία χρήστη από το ξανασχεδιασμό ολόκληρου του κελύφους.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Χρησιμοποίησε template.tsx αντί layout.tsx στις σπάνιες περιπτώσεις που θέλεις η περιτύλιξη να επαναφερθεί κατά τη διαδρομή πλοήγησης.
Τα layouts είναι ο τρόπος με τον οποίο το App Router μοντελοποιεί κοινόχρηστη, μόνιμη διεπαφή (κεφαλίδες, πλαϊνές γραμμές, πλοήγηση) σε οποιοδήποτε επίπεδο του δέντρου διαδρομών.
Η επιμονή τους κατά τη διαδρομή πλοήγησης — διατήρηση της κατάστασης και αποφυγή ξανασχεδιασμού του κελύφους — είναι ένα βασικό πλεονέκτημα του App Router, και τα ένθετα layouts επιτρέπουν σε κάθε ενότητα να συνθέσει τη δική της δομή καθαρά.