patterntypescriptnextjsTip
Route Groups: (folder) convention for layout organization without affecting URLs
Viewed 0 times
Next.js 13+ with App Router
route groups(folder)layout organizationmultiple layoutsurl structuremarketing app split
Problem
Organizing pages into folders changes the URL path, but you want to group pages by feature (marketing, app, auth) with different layouts without polluting URLs with folder names.
Solution
Wrap folder names in parentheses to create route groups that are invisible in URLs:
// File structure:
// app/(marketing)/layout.tsx — marketing layout (header/footer)
// app/(marketing)/page.tsx — matches /
// app/(marketing)/about/page.tsx — matches /about
// app/(app)/layout.tsx — app layout (sidebar/nav)
// app/(app)/dashboard/page.tsx — matches /dashboard
// app/(auth)/layout.tsx — auth layout (centered)
// app/(auth)/login/page.tsx — matches /login
// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
return (
<>
<MarketingHeader />
{children}
<Footer />
</>
);
}
// app/(app)/layout.tsx
export default function AppLayout({ children }) {
return (
<div className='flex'>
<Sidebar />
<main>{children}</main>
</div>
);
}
// File structure:
// app/(marketing)/layout.tsx — marketing layout (header/footer)
// app/(marketing)/page.tsx — matches /
// app/(marketing)/about/page.tsx — matches /about
// app/(app)/layout.tsx — app layout (sidebar/nav)
// app/(app)/dashboard/page.tsx — matches /dashboard
// app/(auth)/layout.tsx — auth layout (centered)
// app/(auth)/login/page.tsx — matches /login
// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }) {
return (
<>
<MarketingHeader />
{children}
<Footer />
</>
);
}
// app/(app)/layout.tsx
export default function AppLayout({ children }) {
return (
<div className='flex'>
<Sidebar />
<main>{children}</main>
</div>
);
}
Why
Route groups let you apply different layouts to different sections of the app without the folder name appearing in the URL. This is essential for apps that have distinct sections (marketing site, authenticated app, admin panel) with completely different UIs.
Gotchas
- Route groups can't be used to create the same URL path in two groups — /about in (marketing) and (app) would conflict
- Each route group can have its own root layout with separate <html> and <body> if needed
- Route groups don't affect routing — (group)/about/page.tsx still matches /about
- You can have multiple root layouts in different route groups for multi-tenant apps
Code Snippets
Auth layout via route group
// app/(auth)/layout.tsx — applies to /login, /register, /forgot-password
// without (auth) appearing in URLs
export default function AuthLayout({ children }) {
return <div className='min-h-screen flex items-center justify-center'>{children}</div>;
}Context
When organizing a Next.js app with multiple distinct sections that need different layouts
Revisions (0)
No revisions yet.