A well-structured [Next.js](/courses/nextjs) application places shared UI at the **closest layout level where that UI is actually shared**. This avoids putting every element into the root layout and keeps sections of the application independent. ### Example Application Suppose a website has: ```text Public website Dashboard Admin panel ``` The entire application needs a basic document shell, while each section has different navigation. A reasonable structure could be: ```text app/ layout.js dashboard/ layout.js page.js users/ page.js admin/ layout.js page.js reports/ page.js ``` ### Root Layout The root layout should contain truly global structure: ```jsx export default function RootLayout({ children }) { return ( {children} ); } ``` ### Dashboard Layout ```jsx export default function DashboardLayout({ children }) { return ( {children} ); } ``` ### Admin Layout ```jsx export default function AdminLayout({ children }) { return ( {children} ); } ``` Now the dashboard does not need to know anything about the admin UI, and the admin area does not inherit dashboard-specific elements. ### A Useful Rule Ask: > What is the highest route level where every descendant actually needs this UI? Put the shared element there. For example: ```text Used everywhere → root layout Used throughout dashboard → dashboard layout Used only in dashboard/settings → settings layout Used on one page → page/component ``` ### Why Is This Better? It improves: - separation of concerns - maintainability - layout reuse - readability - route ownership - scalability of large applications It also avoids one enormous root layout containing dozens of conditional checks such as: ```javascript if (pathname.startsWith('/admin')) { ... } if (pathname.startsWith('/dashboard')) { ... } ``` when the route hierarchy itself can [express](/courses/expressjs) the structure more naturally. ### Interview-Ready Answer Shared UI should be placed at the closest layout level shared by all routes that require it. Truly global structure belongs in the root layout, section-specific UI belongs in nested layouts, and page-specific UI remains in the page or its components. This creates a cleaner and more maintainable UI hierarchy.