Fundamentos del enrutamiento basado en el sistema de archivos
Comprenda los conceptos fundamentales del enrutamiento basado en el sistema de archivos de Next.js y cómo crear páginas y rutas básicas.
Fundamentos del enrutamiento basado en el sistema de archivos es una lección gratuita de Next.js 15 Fullstack (App Router + Server Actions) en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Next.js 15 Fullstack (App Router + Server Actions), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack (App Router + Server Actions) incluye 4 lecciones en total.
Introducción a File-System Routing
Next.js enruta mediante tu **sistema de archivos** — la estructura de tus carpetas y archivos define directamente tus URLs. Los archivos se convierten en páginas, las carpetas se convierten en segmentos de URL.
El directorio `app` principal
Cada ruta reside dentro del directorio especial app — la raíz de la estructura de tu sitio. Todo lo que coloques allí define el enrutamiento.
Crear una Página Raíz
Una ruta necesita un page.js que exporte por defecto un componente de React. Colócalo directamente en app/ y se convierte en tu página de inicio en /.
Hola página de inicio Next.js
Aquí tienes un app/page.js mínimo. Este componente se renderiza en tu URL raíz / — la página de inicio a la que llegan primero los visitantes.
export default function HomePage() {
return (
<div>
<h1>Welcome to CoddyKit!</h1>
<p>This is your Next.js homepage.</p>
</div>
);
}Carpetas para Rutas Anidadas
¿Quieres una ruta /dashboard? Crea una **carpeta dashboard** en app/ y coloca un page.js dentro. El nombre de la carpeta se convierte en el segmento de la URL.
La Página del Dashboard
Este código va en app/dashboard/page.js. Visita /dashboard y Next.js renderiza exactamente este componente.
export default function DashboardPage() {
return (
<div>
<h1>Your Dashboard</h1>
<p>Here you'll find all your important stats.</p>
</div>
);
}Rutas Anidadas Más Profundas
Anida tan profundo como quieras — cada carpeta añade un segmento a la URL. Así, app/products/electronics/page.js se mapea a /products/electronics. Limpio y lógico.
UI Compartida con `layout.js`
Un archivo layout.js define la UI compartida que envuelve las páginas de su carpeta — perfecto para barras de navegación, pies de página y barras laterales que permanecen en su lugar a través de las rutas.
Cuestionario de Mapeo de Rutas
Imagina que tienes un archivo ubicado en app/blog/posts/page.js dentro de tu proyecto Next.js. ¿A qué ruta URL correspondería este archivo?
Resumen de Enrutamiento por Sistema de Archivos
Resumen: el directorio app es la raíz de todas las rutas, page.js define la UI de una ruta, las carpetas crean segmentos anidados, y layout.js comparte la UI entre ellas.
Preguntas frecuentes
¿La lección «Fundamentos del enrutamiento basado en el sistema de archivos» es gratis?
Sí — el texto completo de «Fundamentos del enrutamiento basado en el sistema de archivos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Next.js 15 Fullstack (App Router + Server Actions), actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack (App Router + Server Actions) incluye 4 lecciones en total.
¿Qué aprenderé en «Fundamentos del enrutamiento basado en el sistema de archivos»?
Comprenda los conceptos fundamentales del enrutamiento basado en el sistema de archivos de Next.js y cómo crear páginas y rutas básicas. Practicas Next.js 15 Fullstack (App Router + Server Actions) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Next.js 15 Fullstack (App Router + Server Actions)?
No se requiere experiencia previa. Next.js 15 Fullstack (App Router + Server Actions) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Fundamentos del enrutamiento basado en el sistema de archivos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Next.js 15 Fullstack (App Router + Server Actions)?
Sí. Cada lección de Next.js 15 Fullstack (App Router + Server Actions) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración del proyecto y CLI
- Fundamentos del enrutamiento basado en el sistema de archivos
- Introducción a páginas y layouts
- Aplicación de estilos a su app de Next.js