Next.js 9: Grupos de rutas
easy⏱ 5 mincoursenextjs
Los paréntesis excluyen una carpeta de la URL
Una carpeta llamada (marketing) — con paréntesis alrededor del nombre — es un grupo de rutas. Next.js lo usa puramente para organización: puedes agrupar rutas relacionadas, o darles un layout compartido, sin que esa carpeta se convierta en parte de la URL. app/(marketing)/about/page.tsx se sigue sirviendo en /about.
app/
(marketing)/
layout.tsx // shared layout for marketing pages
about/
page.tsx // -> /about (NOT /marketing/about)
pricing/
page.tsx // -> /pricing
(shop)/
layout.tsx // different shared layout for shop pages
products/
page.tsx // -> /products
¿Para qué sirven los grupos de rutas?
Los grupos de rutas resuelven dos problemas a la vez: te dejan dividir una carpeta app/ grande en secciones lógicas (marketing, tienda, admin) para mayor claridad, y le permiten a distintas secciones de tu sitio compartir diferentes layouts raíz — por ejemplo, las páginas de marketing tienen un header simple, las de tienda tienen un header con ícono de carrito — sin que esos layouts compitan por la misma estructura de URL.
Demuestra que el nombre del grupo desaparece
Crea un componente RouteGroupMap que liste al menos 3 rutas de archivo que incluyan una carpeta (grupo) (por ejemplo, app/(marketing)/about/page.tsx) junto a la URL real que cada una produce (por ejemplo, /about). Renderízalo desde App.