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
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...
);
}
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias