Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Route groups

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

      Route groups

      
      In an app directory, folder names generally map directly to URLs. However, you can designate folders as route groups to keep their names from appearing in the URL.
      
      Route groups let you organize routes and project files without changing the URL structure. They are handy for a variety of uses, such as:
      • Grouping routes by site section, intent, or team
      • Creating multiple layouts at the same level, including multiple root layouts
      
      To mark a folder as a route group, simply enclose the folder name in parentheses, like (dashboard). Here are some practical examples:
      

      Logical Grouping

      
      Group your routes logically without affecting the URL path:
      
      In this case, the final URL skips the folder names enclosed in parentheses, like (marketing) and (shop).
      
      Different Layouts
      
      With route groups, you can have different layouts at the same level:
      
      For instance, /account, /cart, and /checkout are on the same level. However, /account and /cart use the /app/(shop)/layout.js layout and the app/layout.js layout, while /checkout relies solely on app/layout.js layout.
      
      Playground
      
      

      Multiple Root Layouts

      
      To set up multiple root layouts:
      
      Delete the app/layout.js file and create a layout.js file in each route group. Ensure these root layouts contain the <html> and <body>tags.
      
      This approach is especially useful if your project includes both a front-end purchasing page and a back-end management page. One caters to consumers (C-side), while the other serves businesses (B-side), and they likely have different layouts. Route groups make it easy to manage these distinctions.
      
      Additional Considerations
      • Route group names are purely for organization and do not affect the URL path.
      • Be careful not to map different route groups to the same URL path. For example, (marketing)/about/page.js and (shop)/about/page.js both resolve to /about, which will cause a conflict.
      • When creating multiple root layouts, deleting the top-level app/layout.js means accessing / will result in an error. You need to define app/page.js within one of the route groups.
      • Navigating between root layouts will trigger a full page reload. For example, moving from /cart using the app/(shop)/layout.js root layout to /blog using the app/(marketing)/layout.js root layout will reload the page entirely.
      • There may be complications with app/not-found.js when using multiple root layouts. For more details, check out the article "How to Customize Different 404 Pages for Multiple Root Layouts in Next.js v14?"