Route groups

Route groups in Next.js allow you to organize routes and project files without affecting the URL structure. They are particularly useful when you need to share a layout between routes without impacting the URL path.

Creating route groups

To create a route group, wrap a folder name in parentheses - (folderName). Next.js treats this folder as an organizational construct and excludes it from the URL path.

Example implementation

Here’s an example implementation of authentication routes using route groups:

• Directoryapp/

  • Directory(auth)/

    • Directorylogin/

      • page.tsx /login
    • Directoryregister/

      • page.tsx /register
    • Directoryforgot-password/

      • page.tsx /forgot-password
  • page.tsx /

The URLs remain clean and simple:

• /register
• /login
• /forgot-password

Here’s a basic route group component:

// app/(auth)/login/page.tsx
export default function Login() {
  return <h1>Login page</h1>;
}

Nested route groups

You can nest route groups within each other for additional organizational structure. This helps maintain clean URLs while keeping your codebase organized, especially in larger applications with multiple teams.

• Directoryapp/

  • Directory(auth)/

    • Directory(forms)/

      • Directorylogin/

        • page.tsx /login
      • Directoryregister/

        • page.tsx /register
      • Directoryforgot-password/

        • page.tsx /forgot-password
    • Directory(profile)/

      • Directorysettings/

        • page.tsx /settings
      • Directoryaccount/

        • page.tsx /account
  • page.tsx /

Key benefits

Route groups provide several advantages:

• Logical organization of related routes
• Clean URL structure
• Improved developer experience
• Better code organization in team environments
• Ability to share layouts between grouped routes