Next.js desde Cero (App Router) Texto Leccion

Routing y layouts: estructura clara

Routing y layouts en el App Router En el App Router de Next.js, la carpeta app/ es la fuente de verdad de tu navegación: cada carpeta es un segmento de URL y cada archivo page.tsx convierte ese segmento en una ruta accesible. No hay configuración manual de rutas ni un archivo de mapeo central; la estructura de carpetas es el routing. Esto reduce errores y hace que la arquitectura del proyecto se entienda de un vistazo. Las piezas que debes dominar page.tsx: hace pública la ruta. Sin él, la carpe

Tiempo de estudio

15 Min

Routing y layouts en el App Router

En el App Router de Next.js, la carpeta app/ es la fuente de verdad de tu navegación: cada carpeta es un segmento de URL y cada archivo page.tsx convierte ese segmento en una ruta accesible. No hay configuración manual de rutas ni un archivo de mapeo central; la estructura de carpetas es el routing. Esto reduce errores y hace que la arquitectura del proyecto se entienda de un vistazo.

Las piezas que debes dominar

page.tsx: hace pública la ruta. Sin él, la carpeta solo organiza, no responde.

layout.tsx: envuelve a sus páginas hijas y se mantiene montado entre navegaciones (no se vuelve a renderizar). Ideal para barras de navegación y pies de página.

template.tsx: similar al layout pero se vuelve a crear en cada navegación. Úsalo cuando necesites reiniciar estado o re-disparar animaciones de entrada.

Route groups con paréntesis, como (marketing) o (app): agrupan rutas sin añadir un segmento a la URL. Sirven para tener layouts distintos en cada zona.

Consejo

Usa route groups para separar la zona pública de marketing de la zona privada de la aplicación. Cada grupo tiene su propio layout.tsx, así la home y el dashboard no comparten cabecera ni estilos.

Estructura de ejemplo

app/

  (marketing)/

    layout.tsx        // cabecera pública

    page.tsx          // ruta "/"

    precios/page.tsx  // ruta "/precios"

  (app)/

    layout.tsx        // sidebar privado

    dashboard/page.tsx // ruta "/dashboard"

Para navegar entre rutas usa el componente Link, que hace prefetch automático y evita recargas completas de página:

import Link from "next/link";



export default function Nav() {

  return (

    <nav>

      <Link href="/">Inicio</Link>

      <Link href="/precios">Precios</Link>

    </nav>

  );

}

¿Qué efecto tiene envolver carpetas con paréntesis, como (marketing)?

Los route groups organizan archivos y permiten layouts distintos, pero el nombre entre paréntesis no aparece en la URL.

Ejercicio práctico

Objetivo: separar tu sitio en dos zonas con layouts independientes.

Crea los route groups (marketing) y (app) dentro de app/.
En (marketing) añade un layout.tsx con una barra de navegación pública y una page.tsx de inicio.
En (app) añade un layout.tsx con un sidebar y dashboard/page.tsx.
Comprueba que / muestra la nav pública y /dashboard el sidebar, sin que se mezclen.

Entregable: captura de ambas rutas y el árbol de carpetas de app/.

Para recordar

La carpeta app/ define el routing; page.tsx hace pública la ruta.
layout.tsx persiste entre navegaciones; template.tsx se reinicia.
Los route groups (nombre) agrupan sin afectar la URL.

Texto Lessons