Given this Next.js app structure using route groups and multiple root layouts:
app/(marketing)/layout.tsx app/(marketing)/page.tsx app/(dashboard)/layout.tsx app/(dashboard)/settings/page.tsx app/layout.tsx
Which layout component wraps the /settings page?
/*
app/layout.tsx
export default function RootLayout({ children }) {
return <html><body><div>Root Layout {children}</div></body></html>
}
app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
return <div>Marketing Layout {children}</div>
}
app/(dashboard)/layout.tsx
export default function DashboardLayout({ children }) {
return <div>Dashboard Layout {children}</div>
}
app/(dashboard)/settings/page.tsx
export default function SettingsPage() {
return <p>Settings Page</p>
}
*/Remember that route groups are folders in parentheses that help organize routes but do not add to the URL path. The root layout always wraps all pages.
The root app/layout.tsx wraps the entire app. The (dashboard) route group has its own layout that wraps pages inside it, including settings/page.tsx. The (marketing) layout does not wrap dashboard routes.
In Next.js App Router, how do you correctly export a layout component inside a route group folder (admin)?
Layouts inside route groups must accept { children } as a prop and should not include <html> or <body> tags (those are only for the root layout).
In Next.js, only the root app/layout.tsx should include <html> and <body>. Layouts inside route groups are nested layouts and should wrap children in elements like <div> or <section>. Option B is correct. Options A, C, D incorrectly use <html> or miss props.
Given this folder structure:
app/layout.tsx app/(user)/layout.tsx app/(user)/profile/page.tsx app/(admin)/layout.tsx app/(admin)/dashboard/page.tsx
The /profile page renders only the root layout, not the (user) layout. What is the most likely cause?
Check the export of the layout component inside the route group.
If the layout.tsx inside (user) does not export a default React component, Next.js will ignore it and fallback to the root layout only.
Consider this Next.js app structure and components:
app/layout.tsx
export default function RootLayout({ children }) {
return Root {children}
}
app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
return Marketing {children}
}
app/(marketing)/home/page.tsx
export default function HomePage() {
return Welcome Home
}
What is the full rendered HTML output for the /home page?
Remember the root layout wraps everything, then nested layouts wrap their children.
The root layout returns <html><body><div>Root {children}</div></body></html>. The marketing layout wraps its children in a <section>. The page renders inside marketing layout. So the nesting is RootLayout > MarketingLayout > HomePage.
In Next.js App Router, what is the effect of using route groups (folders in parentheses) on URL paths and layout nesting?
Think about how parentheses in folder names affect routing and layouts.
Route groups are folders named with parentheses that do not add to the URL path but allow you to organize routes and apply separate layouts to those groups.