Cuando trabajas con Next.js y necesitas que ciertos componentes aparezcan solo en una página específica sin afectar otras rutas, el route grouping es la herramienta ideal. Esta técnica permite agrupar rutas bajo una carpeta especial que no genera un nuevo segmento en la URL, resolviendo problemas comunes de organización de layouts.
¿Cuál es el problema con los layouts compartidos en Next.js?
Imagina que tienes una aplicación con una landing page que muestra un hero, una descripción y una sección de productos nuevos de Shopify. La sección de productos implementa un loader que muestra un indicador de carga mientras se obtienen los datos [0:05]. Si colocas todos los componentes en el page.tsx, el loader aparece cubriendo toda la página.
Para evitar eso, una primera solución es mover los componentes estáticos al layout, ya que son React Server Components y no dependen de datos asíncronos [0:22]. Sin embargo, al colocarlos en el route layout (el layout raíz), estos componentes aparecen en todas las rutas de la aplicación. Si tienes una ruta como /store, verás el hero y la descripción ahí también, lo cual no tiene sentido [0:36].
El dilema es claro: necesitas un layout que aplique solo a la página de inicio, sin que afecte otras rutas como la tienda.
¿Cómo funciona el route grouping para resolver esto?
En Next.js, cada carpeta dentro de app genera automáticamente un segmento de ruta. Si creas una carpeta llamada home, todo su contenido estará disponible en localhost:3000/home [1:06]. Pero existe una nomenclatura especial que permite crear carpetas que no generan segmentos de ruta: los route groups.
- Se crean usando paréntesis en el nombre de la carpeta, por ejemplo
(home) [1:18].
- Los archivos especiales como
page.tsx, layout.tsx y loading.tsx dentro de esa carpeta funcionan normalmente.
- La URL no cambia: el
page.tsx dentro de (home) sigue respondiendo en la ruta /, es decir, el slash raíz [1:34].
¿Cómo se implementa paso a paso?
Primero, mueves tu page.tsx principal dentro de la carpeta del route group (home) [1:24]. Después, sacas del route layout los componentes que solo necesitas en la landing page, como el hero y la descripción. El header se queda en el route layout porque sí lo quieres en todas las páginas [1:50].
Luego, creas un nuevo layout.tsx dentro de la carpeta (home) [2:09]:
tsx
import Hero from "@/components/Hero";
import Description from "@/components/Description";
export default function HomeLayout({ children }: { children: React.ReactNode }) {
return (
<div>
<Hero />
<Description />
{children}
</div>
);
}
Una ventaja importante al usar aliases con el símbolo @ es que puedes copiar y pegar imports entre archivos sin preocuparte por rutas relativas [2:22]. Con este layout específico, el hero y la descripción solo aparecen en la ruta raíz, mientras que /store queda limpia y sin esos componentes [2:52].
¿Cuándo conviene usar route grouping?
El route grouping no debe usarse de manera excesiva para hacer pequeños hacks en la estructura de tu proyecto [3:07]. Su propósito principal es hacer más reutilizables las rutas agrupándolas por criterios claros.
- Agrupa por dominio de negocio: separa la tienda, la página de contacto, la sección about y otras áreas en grupos distintos [3:22].
- Comparte layouts de forma intencional: cada grupo puede tener su propio layout, loader o archivos especiales sin afectar al resto.
- Mantén la organización: el criterio debe responder a las necesidades del negocio, no solo a conveniencia técnica [3:40].
El route grouping es una de esas características de Next.js que, bien aplicada, mantiene tu código ordenado y tus layouts predecibles. ¿Ya lo estás usando en tus proyectos? Comparte cómo organizas tus rutas.
