0
0
NextJSframework~20 mins

Multiple root layouts with route groups in NextJS - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
Next.js Multiple Root Layouts Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What layout is applied to the /settings route?

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?

NextJS
/*
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>
}
*/
ARootLayout > DashboardLayout > SettingsPage
BRootLayout > MarketingLayout > DashboardLayout > SettingsPage
CDashboardLayout > SettingsPage
DRootLayout > MarketingLayout > SettingsPage
Attempts:
2 left
💡 Hint

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.

📝 Syntax
intermediate
2:00remaining
Which code correctly defines a layout for a route group?

In Next.js App Router, how do you correctly export a layout component inside a route group folder (admin)?

Aexport default function AdminLayout({ children }) { return <html><body>{children}</body></html> }
Bexport default function AdminLayout({ children }) { return <div>{children}</div> }
Cexport default function AdminLayout() { return <html><body>{children}</body></html> }
Dexport default function AdminLayout({ children }) { return <html><head></head><body>{children}</body></html> }
Attempts:
2 left
💡 Hint

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).

🔧 Debug
advanced
2:00remaining
Why does the /profile page not use the (user) layout?

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?

AThe (user) folder is missing the layout.tsx file.
BThe (user) folder is named incorrectly and should not have parentheses.
CThe profile page is outside the (user) folder.
DThe (user) layout.tsx does not export a default React component.
Attempts:
2 left
💡 Hint

Check the export of the layout component inside the route group.

❓ state_output
advanced
2:00remaining
What is the rendered output for nested layouts with route groups?

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?

A<html><body><div>Root <section>Marketing <p>Welcome Home</p></section></div></body></html>
B<html><body><section>Marketing <div>Root <p>Welcome Home</p></div></section></body></html>
C<div>Root <section>Marketing <p>Welcome Home</p></section></div>
D<html><body><div>Root <p>Welcome Home</p></div></body></html>
Attempts:
2 left
💡 Hint

Remember the root layout wraps everything, then nested layouts wrap their children.

🧠 Conceptual
expert
2:00remaining
How do route groups affect URL paths and layout nesting?

In Next.js App Router, what is the effect of using route groups (folders in parentheses) on URL paths and layout nesting?

ARoute groups add a segment to the URL path but do not affect layout nesting.
BRoute groups neither affect URL paths nor layout nesting; they are only for file organization.
CRoute groups do not add to the URL path but allow separate layout nesting for grouped routes.
DRoute groups add a segment to the URL path and also create separate layout nesting.
Attempts:
2 left
💡 Hint

Think about how parentheses in folder names affect routing and layouts.