Creando rutas en Next.js con App Router

La creación de rutas en Next.js esta basado en file-system based routing mediante App Router, que es el estándar actual. Este indica que la estructura de archivos y carpetas dentro de la carpeta /app determina las rutas de tu aplicación.

Aquí te presento algunos ejemplos de cómo crear diferentes tipos de rutas utilizando el App Router en Next.js.

Rutas básicas

Cada archivo page.tsx dentro de una carpeta dentro del directorio app/ representa una ruta en tu aplicación Next.js.

Rutas anidadas

Puedes crear rutas anidadas simplemente creando subdirectorios dentro de la carpeta app:

Rutas agrupadas (Route Groups)

Utilizar rutas agrupadas nos permite organizar mejor nuestras paginas sin afectar las URLs finales, se crean utilizando (parentesis) en el nombre de la carpeta.

Además, nos permite definir layouts específicos para cada grupo de rutas:

app/
├── (landing)/
│   ├── layout.tsx         # Layout específico para landing pages
│   ├── cyberday/
│   │   └── page.tsx
│   └── blackfriday/
│       └── page.tsx
└── (dashboard)/
    ├── layout.tsx         # Layout específico para dashboard
    ├── usuarios/
    │   └── page.tsx
    └── configuracion/
        └── page.tsx
├── layout.tsx             # Layout global de la aplicación
└── page.tsx               # Página de inicio

Rutas dinámicas

Las rutas dinámicas se crean utilizando [corchetes] en los nombres de las carpetas. Estás permiten generar rutas basadas en datos dinámicos, como IDs de productos o nombres de usuario.

Rutas con segmentos opcionales

Las rutas con segmentos opcionales se crean utilizando doble corchete [[...nombre]]. y permiten que una ruta acepte múltiples niveles de profundidad.

Nota

En los ejemplos la extensión de los archivos es .tsx, pero también puedes usar .js o .jsx .

Puedes encontrar más información sobre manejo de rutas en la documentación oficial de Next.js.

Gracias por leer, que tengas un día maravilloso! 🌞