Asettelu on jaettu käyttöliittymä, joka kääritään useiden sivujen ympärille ja säilyy navigoinnissa — se ei uudelleenpiirretä eikä menetä tilaa, kun siirryt aliroottien välillä. Määrität sen layout.tsx -tiedostolla.
() {
(
);
}
Jokaisella App Router -sovelluksella on oltava juuriasettelu — se korvaa vanhat _app.tsx/_document.tsx.
Asettelut sisäkkäin kansiorakenteen mukaan, joten jokainen osa voi lisätä oman pysyvän kääreen:
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>
);
}
Kun siirryt /dashboard/settings -sivulta /dashboard/billing -sivulle, kojelauta-asettelu (ja sen <Sidebar>) pysyy liitettynä — sen tila (vierityspositio, avoimet valikot, lomakkeen syöttö) säilyy, ja vain sivun sisältö vaihtuu. Tämä on tehokkaampi ja antaa sujuvamman käyttäjäkokemuksen kuin koko kuoren uudelleenpiirto.
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
Käytä template.tsx -tiedostoa layout.tsx -tiedoston sijaan harvinaisissa tapauksissa, joissa haluat kääreen nollautuvan jokaisessa navigoinnissa.
Asettelut ovat tapa, jolla App Router mallintaa jaetun, pysyvän käyttöliittymän (otsikot, sivupalkit, navigaatio) reittiäpuun missä tahansa tasolla.
Niiden pysyvyys navigoinnissa — tilan säilyttäminen ja kuoren uudelleenpiirron välttäminen — on App Routerin ydin etu, ja sisäkkäiset asettelut antavat jokaiselle osalle mahdollisuuden muodostaa oma rakenteensa puhtaasti.