🧭 Ruteo básico en Next.js (App Router)

04 - Ruteo básico en Next.js (App Router)

Aprende cómo funcionan las rutas en Next.js utilizando el sistema de carpetas dentro de app/, sin necesidad de configurar archivos de rutas manualmente.

• Concepto del enrutamiento en Next.js
• Creación de páginas básicas
• Rutas anidadas
• Código de ejemplo

---

Concepto del enrutamiento en Next.js

En Next.js, las rutas se definen automáticamente según la estructura de carpetas dentro del directorio app/. Cada carpeta representa una ruta, y dentro de ella debe existir un archivo page.js que define el contenido de esa página.

Esto significa que no necesitas configurar manualmente rutas o archivos como routes.js. El sistema de ruteo es completamente basado en el filesystem (el sistema de archivos).

Creación de páginas básicas

Para crear una nueva página, simplemente crea una carpeta dentro de app/ y agrega un archivo page.js dentro de ella. Por ejemplo:

app/
 ├─ page.js                → Ruta principal: /
 ├─ contacto/
 │   └─ page.js            → Ruta: /contacto
 └─ productos/
     └─ page.js            → Ruta: /productos
      

Si visitas http://localhost:3000/contacto, Next.js renderizará automáticamente el contenido del archivo app/contacto/page.js.

Rutas anidadas

También puedes crear rutas dentro de rutas, simplemente anidando carpetas. Por ejemplo, si creas app/blog/articulos/page.js, esa página se mostrará en la URL /blog/articulos.

Next.js se encarga automáticamente de generar la jerarquía de rutas y aplicar los layouts definidos en los niveles superiores.

Ejemplo práctico (Rutas básicas)

// Archivo: app/page.js
export default function Home() {
  return (
    

      
Página principal 🏠
      
Bienvenido a tu proyecto Next.js
      
Explora las rutas /contacto y /productos
    
  );
}

// Archivo: app/contacto/page.js
export default function Contacto() {
  return (
    

      
Contacto 📞
      
Puedes escribirnos a contacto@miweb.com
    
  );
}

// Archivo: app/productos/page.js
export default function Productos() {
  return (
    

      
Productos 🛍️
      
Lista de productos próximamente...
    
  );
}
        

← Volver al índice