განლაგება არის გაზიარებული UI, რომელიც დაფარავს რამდენიმე გვერდს და რჩება მუდმივი ნავიგაციის დროს — ის არ იქმნება ხელახლა და არ კარგავს მდგომარეობას, როდესაც ბავშვის მარშრუტებს შორის გადაიხვევთ. თქვენ ის განსაზღვრავთ layout.tsx ფაილით.
() {
(
);
}
ყველა App Router აპლიკაცია უნდა ჰქონდეს ფესვის განლაგება — ის ჩანაცვლებს ძველ _app.tsx/_document.tsx-ს.
განლაგებები ჩასმული ფოლდერის სტრუქტურის გასწვრივ, ამიტომ თითოეული განყოფილება შეიძლება დაამატოს საკუთარი მუდმივი გამოსახულება:
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-ში, ინფორმационული დაფის განლაგება (და მისი <Sidebar>) რჩება დამაგრებული — მისი მდგომარეობა (გადახვევის პოზიცია, ღიძული მენიუები, ფორმის შეყვანა) შენახულია და მხოლოდ გვერდის შინაარსი იცვლება. ეს უფრო ეფექტურია და უფრო გლუვი UX-ს იძლევა, ვიდრე მთელი გარსის ხელახლა შექმნა.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
გამოიყენეთ template.tsx layout.tsx-ის ნაცვლად იმ იშვიათ შემთხვევაში, როდესაც გსურთ, რომ გამოსახულება დატაროს ხელახლა თითოეული ნავიგაციისას.
განლაგებები ის გზაა, რომლითაც App Router მოდელირებს გაზიარებულ, მუდმივ UI-ს (სათაურებს, გვერდითი ზოლებს, ნავიგაციას) მარშრუტის ხის ნებისმიერ დონეზე.
მათი მუდმივობა ნავიგაციის დროს — მდგომარეობის შენახვა და გარსის ხელახლა შეყვანის თავიდან აცილება — არის App Router-ის ძირითადი უპირატესობა, და ჩასმული განლაგებები საშუალებას აძლევს თითოეულ განყოფილებას წაახალისოს საკუთარი სტრუქტურა ხელმისაწვდომი გზით.