Playground
Menu
Layouts
Nested Layouts
Route Groups
Parallel Routes
File Conventions
Loading
Error
Not Found
Caching
Routes
Components
Functions
APIs
useLinkStatus
Misc
Client Context
Demo
Route Groups
Route groups can be used to:
Opt a route segment out of a shared layout.
Organize routes without affecting the URL structure.
Create multiple root layouts by partitioning the top level of the application.
Demo
This example uses Route Groups to create layouts for different sections of an app.
(main): primary shared UI
(shop): ecommerce specific shared UI
(marketing): marketing specific shared UI
(checkout): top level group that opts out of primary shared UI
Try navigating pages and noting the different layouts used for each section.
Links
Docs
Code
More
(main)/layout.tsx
Home
Clothing
Checkout
Blog
(main)(marketing)/layout.tsx
(main)/(marketing)/blog/page.tsx
Blog
Source code
/
Docs
/
Deploy on