App Router ਵਿੱਚ layouts ਕੀ ਹਨ? – Next.js · IT ਇੰਟਰਵਿਊ ਅਭਿਆਸ

App Router ਵਿੱਚ layouts ਕੀ ਹਨ?

Layout ਇੱਕ ਸ਼ੇਅਰ ਕੀਤਾ UI ਹੈ ਜੋ ਕਈ ਪੰਨਿਆਂ ਨੂੰ ਲਪੇਟਦਾ ਹੈ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਦੌਰਾਨ ਬਣਿਆ ਰਹਿੰਦਾ ਹੈ — ਇਹ ਮੁੜ ਰੈਂਡਰ ਨਹੀਂ ਹੁੰਦਾ ਅਤੇ ਨਾ ਹੀ ਸਥਿਤੀ ਗੁਆ ਦਿੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਬੱਚਿਆਂ ਦੇ ਰੂਟਸ ਦੇ ਵਿੱਚਕਾਰ ਜਾਂਦੇ ਹੋ। ਤੁਸੀਂ ਇਸਨੂੰ 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

ਕਿਉਂ ਪਰਸਿਸਟੈਂਸ ਮਹੱਤਵਪੂਰਨ ਹੈ

Layout vs template

ਕਿਉਂ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੈ