Cuando trabajas con Next.js y necesitas que un loader o un layout aplique solo a una ruta específica sin afectar al resto de la aplicación, el route grouping es la solución. Aquí aprenderás cómo agrupar rutas en Next.js para reutilizar layouts, aislar loaders y organizar tu app por dominios de negocio sin generar segmentos de ruta innecesarios.
¿Qué problema resuelve el route grouping en Next.js?
Imagina que tienes una app Next.js con un componente que muestra productos de Shopify. Cuando recargas, aparece un loader que vive directamente en la ruta de la aplicación. Si dejas todos los componentes en el page.tsx, ese loader cubre toda la sección, lo cual no es lo ideal.
La primera solución intuitiva es mover los componentes (header, hero, description) al layout raíz. Pero ahí surge otro problema: cuando navegas a /store, esos mismos componentes siguen apareciendo, porque el layout raíz se comparte en toda la app.
¿Qué es route grouping en Next.js? Es una convención de nombres que permite crear carpetas para agrupar rutas sin generar un segmento de URL. Se escriben con paréntesis, por ejemplo (home), y Next.js las ignora al construir la ruta.
¿Cómo se implementa un route group paso a paso?
La convención es simple: si creas una carpeta llamada home, todo lo que pongas dentro se servirá en localhost:3000/home. Pero si la nombras entre paréntesis, Next.js ignora esa carpeta como segmento de ruta.
El flujo de trabajo queda así:
- Crea una carpeta con el nombre del grupo entre paréntesis, por ejemplo
(home).
- Mueve dentro el
page.tsx que representa la raíz / de tu aplicación.
- Crea un
layout.tsx específico para ese grupo, que solo aplicará a las rutas dentro de la carpeta.
- Elimina del layout raíz los componentes que no deben compartirse, como
hero y description.
¿Cómo se ve el layout específico del grupo?
Dentro de (home)/layout.tsx defines un componente que recibe children como prop de tipo ReactNode y renderiza los componentes que solo deben aparecer en la home:
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>
)
}
Usar aliases en los imports te permite copiar y pegar componentes entre archivos sin reescribir rutas relativas. Es una pequeña práctica que ahorra mucho tiempo.
¿Cuándo deberías usar route grouping y cuándo no?
Aunque el route grouping te da flexibilidad para aplicar un loader específico, un layout aislado o evitar que ciertos componentes se filtren a otras rutas, no conviene abusar de él para hackear comportamientos puntuales.
El propósito real de los route groups es hacer que tus rutas sean más reutilizables agrupándolas por criterios coherentes. Por ejemplo, el loader de /store puede ser el mismo que el de la ruta principal, o puedes tener loaders compartidos para todas las páginas.
¿Cuándo conviene crear un route group? Cuando necesitas separar tu app por dominios de negocio (tienda, about, contacto) y compartir layouts o loaders comunes dentro de cada dominio.
¿Qué criterio usar para agrupar rutas?
El mejor enfoque es pensar en dominios de negocio. Algunos ejemplos prácticos:
- Un grupo para la tienda y todas sus subrutas relacionadas.
- Un grupo para páginas institucionales como about o contacto.
- Un grupo para el flujo de autenticación o el dashboard del usuario.
La clave está en separar por necesidades del negocio y, sobre todo, por los layouts comunes que vas a compartir entre esas rutas. Eso mantiene tu estructura limpia y predecible.
¿Cómo estás organizando tus rutas en tu proyecto actual? Cuéntame en los comentarios qué criterios sigues para decidir cuándo agrupar.
