layout એ શેર કરાયેલ UI છે જે બહુવિધ પૃષ્ઠોને લપેટે છે અને નેવિગેશન પર સતત રહે છે — જ્યારે તમે ચાઈલ્ડ રૂટ્સ વચ્ચે જાઓ છો ત્યારે તે re-render થતું નથી અથવા તેની સ્થિતિ ગુમાવતું નથી। તમે તેને layout.tsx ફાઈલ સાથે વ્યાખ્યાયિત કરો છો।
() {
(
);
}
પ્રત્યેક App Router એપ્લીકેશનમાં root layout હોવું જરૂરી છે — તે જૂના _app.tsx/_document.tsx ને બદલે દે છે।
Layouts ફોલ્ડર સ્ટ્રક્ચર સાથે નેસ્ટ કરે છે, તેથી દરેક વિભાગ તેનો પોતાનો સતત wrapper ઉમેરી શકે છે:
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>) માઉન્ટ રહે છે — તેની સ્થિતિ (સ્ક્રોલ પોઝીશન, ખુલ્લા મેનુ, ફોર્મ ઇનપુટ) સુરક્ષિત રહે છે, અને માત્ર પૃષ્ઠ સામગ્રી બદલાય છે। આ સમગ્ર શેલ ફરીથી રેન્ડર કરવાની તુલનામાં વધુ કાર્યક્ષમ છે અને સુંદર UX આપે છે।
// template.tsx — like layout but RE-mounts on every navigation (fresh state each time)
બિરલા કિસ્સામાં template.tsx નો ઉપયોગ કરો જ્યારે તમે ઇચ્છતા હો કે wrapper પ્રત્યેક નેવિગેશન પર રીસેટ થાય।
Layouts એ છે કે કેવી રીતે App Router શેર કરાયેલ, સતત UI (હેડર્સ, સાઈડબાર, નેવ) ને રૂટ ટ્રીના કોઈ પણ સ્તરે મોડલ કરે છે।
નેવિગેશન પર તેમની સતત તર — સ્થિતિ સુરક્ષિત કરવી અને શેલ ફરીથી રેન્ડર કરવાથી બચવું — આ App Router નો મુખ્ય લાભ છે, અને નેસ્ટેડ layouts દરેક વિભાગને તેનો પોતાનો સ્ટ્રક્ચર સ્વચ્છતાથી બનાવવાની મંજૂરી આપે છે।