Grupos de rutas (Route Groups) en Next.js App Router

Contexto arquitectónico y motivación#

En el enrutamiento basado en archivos de App Router, la estructura de carpetas se proyecta directamente sobre las URLs públicas. Sin embargo, en arquitecturas empresariales complejas, las necesidades de organización del repositorio colisionan a menudo con la estructura requerida para las URLs:

• Diferentes estructuras visuales en el mismo nivel de URL: La necesidad de aplicar layouts radicalmente distintos sin añadir prefijos innecesarios a la URL (por ejemplo, una pantalla de acceso limpia en /login frente a un entorno de trabajo con barra lateral en /dashboard).
• Organización modular por dominios de negocio: Separar lógicamente el código por equipos y áreas de responsabilidad (marketing, e-commerce, facturación, panel de control) sin alterar la ruta en el navegador.
• Aislamiento de proveedores de cliente: Evitar que contextos de React pesados (WebSockets, React Query, Zustand) se filtren en el bundle inicial de páginas públicas de marketing.

Next.js App Router solventa esto mediante los Route Groups (grupos de rutas). Envolver el nombre de una carpeta entre paréntesis indica a Turbopack que dicho segmento existe únicamente para estructuración interna y aplicación de layouts, omitiéndolo de la ruta URL resultante.

Modelo mental: aislamiento de layouts sin mutación de URL#

Cuando el compilador de Next.js procesa la carpeta app, los nombres delimitados por paréntesis (folderName) actúan como fronteras organizativas en el sistema de archivos, pero son eliminados al construir la tabla de rutas:

• El archivo app/(marketing)/about/page.tsx se compila en /about.
• El archivo app/(dashboard)/analytics/page.tsx se compila en /analytics.
• El archivo app/(shop)/checkout/page.tsx se compila en /checkout.

A la vez, el compilador conserva el grupo en su Route Segment Tree ID. Esto permite que cada grupo disponga de sus propios layout.tsx, loading.tsx y error.tsx independientes.

Algoritmo de ejecución y ciclo de vida (Runtime Execution)#

Sintaxis y API: organización y múltiples Root Layouts#

1. Aplicación selectiva de layouts (Opt-in Layouts)#

Dentro de una misma aplicación, diferentes secciones pueden requerir disposiciones distintas. Al crear grupos, se aíslan los layouts sin alterar la URL:

app/
├── (marketing)/
│   ├── layout.tsx         # Layout público (Header, Banner, Footer)
│   ├── page.tsx           # Ruta: / (Inicio de Marketing)
│   ├── about/page.tsx     # Ruta: /about
│   └── pricing/page.tsx   # Ruta: /pricing
└── (dashboard)/
    ├── layout.tsx         # Layout privado (Sidebar, Menú de usuario)
    ├── dashboard/page.tsx # Ruta: /dashboard
    └── settings/page.tsx  # Ruta: /settings

2. Múltiples Root Layouts#

Next.js permite suprimir el archivo raíz app/layout.tsx y declarar Root Layouts independientes dentro de cada grupo:

export default function MarketingRootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body className="marketing-theme">
        {/* HTML estático limpio sin proveedores de cliente pesados */}
        <header className="marketing-header">Encabezado Marketing</header>
        {children}
      </body>
    </html>
  );
}

import { AuthProvider } from '@/components/auth/AuthProvider';

export default function AppRootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="es">
      <body className="app-theme">
        {/* Los proveedores pesados de sesión solo se montan aquí */}
        <AuthProvider>
          {children}
        </AuthProvider>
      </body>
    </html>
  );
}

Patrones prácticos: organización arquitectónica#

Patrón 1: Aislamiento de contextos pesados y optimización de LCP#

En productos comerciales es prioritario que las páginas de aterrizaje carguen con métricas óptimas de Core Web Vitals (LCP < 1.2s). Con Route Groups se pueden confinar los proveedores de autenticación y WebSockets al grupo (app), manteniendo (marketing) totalmente ligero:

app/
├── layout.tsx (Shell raíz común)
├── (marketing)/
│   ├── layout.tsx         ──► Bundle JS de cliente cero: SSR/SSG puro
│   └── page.tsx           ──► LCP: 0.6s (CDN Edge Cache)
└── (workspace)/
    ├── layout.tsx         ──► Contiene AuthContext, WebSocketProvider, ReactQuery
    └── editor/page.tsx    ──► Entorno de trabajo interactivo

Errores comunes: fallos del sistema y seguridad#

Preguntas de entrevista para ingenieros Staff / Lead#