App Router मा layouts भनेको के हो? – Next.js · IT अन्तर्वार्ता अभ्यास

App Router मा layouts भनेको के हो?

एक layout साझा UI हो जसले धेरै पृष्ठहरूलाई बेष्टाउँछ र नेभिगेशनमा कायम रहन्छ — बच्चा route हरूको बीचमा घुमिंदा यो पुनः render वा state गुमाउँदैन। तपाई यसलाई layout.tsx फाइलको साथ परिभाषित गर्नुहुन्छ।

root layout (आवश्यक)

tsx


   () {
   (
    
  );
}

text

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

tsx

// 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>
  );
}

App Router मा layouts भनेको के हो?

root layout (आवश्यक)

Nested layouts

किन persistence महत्त्वपूर्ण छ

Layout बनाम template

किन यो महत्त्वपूर्ण छ