app/(app) route group in shadcn-ui/ui
Ramu Narasinga
Posted on May 30, 2024
You can tell shadcn-ui/ui is built using app router by looking at its folder structure inside apps/www.
since the folder name inside app is (app) , in Next.js, this means that this folder is a route group.
Route Groups
In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.
This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.
Route groups are useful for:
- Organizing routes into groups e.g. by site section, intent, or team.
- Enabling nested layouts in the same route segment level:
- Creating multiple nested layouts in the same segment, including multiple root layouts
- Adding a layout to a subset of routes in a common segment
Next.js docs provide the following examples, be sure to check them out:
- Organize routes without affecting the URL path
- Opting specific segments into a layout
- Creating multiple root layouts
Shadcn-ui/ui leverages route group to share the common layout among docs, components, themes, examples, blocks pages.
Common layout in this case is the header and footer that can be found in components folder.
site-footer.tsx
site-header.tsx
Get free courses inspired by the best practices used in open source.
About me:
Website: https://ramunarasinga.com/
Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/
Github: https://github.com/Ramu-Narasinga
Email: ramu.narasinga@gmail.com
Learn the best practices used in open source.
References:
- https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx
- https://github.com/shadcn-ui/ui/tree/main/apps/www/components
- https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx
- https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx
- https://nextjs.org/docs/app/building-your-application/routing/route-groups
Posted on May 30, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
May 22, 2024