Agrupar rutas y diferentes layouts al mismo nivel, en Next.js con App Router en 1 minuto

nuestra aplicación tiene varias rutas como la página de inicio la ruta de detalles inicio de sesión y creación de usuario todas estas rutas comparten un layout en común que incluye una barra de navegación con un campo de búsqueda sin embargo nos dijeron que la barra de navegación no debería aparecer en las pantallas de inicio de sesión ni creación de usuario El problema es que estas rutas están Al mismo nivel que nuestra ruta de detalle Por ende nuestro layout afecta a todas las rutas para

esto podemos usar el agrupado de rutas que nos permite definir una carpeta para agrupar u ordenar rutas en nuestra aplicación sin afectar la estructura de la URL vamos a crear una carpeta header entre paréntesis para definir un grupo de rutas el nombre puede ser lo que quieras Mientras esté entre paréntesis dentro vamos a mover las rutas cuyo layout incluyen el header en nuestro caso nuestra página de inicio y

la página de detalle luego vamos a crear un archivo layout.js dentro de nuestra nueva carpeta header para definir un layout anidado ahora vamos a nuestro layout principal cortamos el header y luego lo movemos al ley aut anidado ahora a pesar de que nuestras rutas de inicio de sesión y creación de cuenta estén Al mismo nivel de ruta que la de detalle respetan el layout definido nuestro grupo de rutas así que

nuestro header solo esté presente en la página de inicio y la de detalle