app/(app) route group in shadcn-ui/ui

ramunarasinga

Ramu Narasinga

Posted on May 30, 2024

app/(app) route group in shadcn-ui/ui

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:

Next.js docs provide the following examples, be sure to check them out:

  1. Organize routes without affecting the URL path
  2. Opting specific segments into a layout
  3. 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:

  1. https://github.com/shadcn-ui/ui/blob/main/apps/www/app/(app)/layout.tsx
  2. https://github.com/shadcn-ui/ui/tree/main/apps/www/components
  3. https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-footer.tsx
  4. https://github.com/shadcn-ui/ui/blob/main/apps/www/components/site-header.tsx
  5. https://nextjs.org/docs/app/building-your-application/routing/route-groups
💖 💪 🙅 🚩
ramunarasinga
Ramu Narasinga

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