0Pricing
Next.js 15 Fullstack Web Apps · Lección

Fundamentos de páginas, layouts y enrutamiento

Explore el App Router, defina páginas, cree layouts compartidos y navegue entre rutas de su aplicación.

Fundamentos de páginas, layouts y enrutamiento es una lección gratuita de Next.js 15 Fullstack Web Apps en CoddyKit. Esta es la lección 3 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 Web Apps, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Welcome to App Router

The App Router is Next.js 15's routing system, built on React Server Components. It lets you co-locate components, styles, and tests by route.

Routes from Your Files

Routing is filesystem-based: your folder structure inside app/ directly defines your URLs, keeping the project predictable.

Defining a Page

A page.js file inside a folder makes that route render. It exports the React component shown when a user visits that URL.

Code: Simple Page

Create app/page.js and it automatically becomes your home page at the / route. Here is the component that renders there.

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to CoddyKit!</h1>
      <p>This is your Next.js home page.</p>
    </div>
  );
}

Organizing with Nested Routes

Build nested routes by nesting folders in app/ — each folder is a URL segment, so app/dashboard/settings/ maps to /dashboard/settings.

Code: Nested Page

To serve /dashboard/settings, create that folder path with a page.js inside. The file's component renders at that URL.

// app/dashboard/settings/page.js
export default function DashboardSettingsPage() {
  return (
    <div>
      <h2>Dashboard Settings</h2>
      <p>Manage your preferences here.</p>
    </div>
  );
}

Shared UI with Layouts

A layout (layout.js) is shared UI that wraps the pages in its segment — ideal for navbars, sidebars, and footers via the children prop.

Code: Root Layout

Every App Router project needs a root layout.js. It defines the base HTML — the <html> and <body> tags around your whole app.

// app/layout.js
import './globals.css'; // Global styles (optional)

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav>Home | About</nav>
        </header>
        <main>{children}</main> {/* Page content goes here */}
        <footer>&copy; 2024 CoddyKit</footer>
      </body>
    </html>
  );
}

Nested Layouts

Nested layouts apply only to their folder and subfolders, inheriting from parent layouts — so you can build hierarchical UI per section.

Linking Between Pages

Navigate with the <Link> component from next/link. It behaves like an anchor but does client-side routing — no full page reload.

// app/page.js (example usage)
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Welcome!</h1>
      <p>Go to the <Link href="/about">About Us</Link> page.</p>
      <p>Or visit your <Link href="/dashboard">Dashboard</Link>.</p>
    </div>
  );
}

Routing & Layouts Check

Which of the following statements about Next.js 15 App Router are TRUE?

Recap: Pages, Layouts & Routing

You learned the App Router: folders define routes, page.js renders content, layout.js shares UI, and <Link> handles fast navigation.

Preguntas frecuentes

¿La lección «Fundamentos de páginas, layouts y enrutamiento» es gratis?

Sí — el texto completo de «Fundamentos de páginas, layouts y enrutamiento» 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 Web Apps, actualiza a CoddyKit PRO. El curso de Next.js 15 Fullstack Web Apps incluye 4 lecciones en total.

¿Qué aprenderé en «Fundamentos de páginas, layouts y enrutamiento»?

Explore el App Router, defina páginas, cree layouts compartidos y navegue entre rutas de su aplicación. Practicas Next.js 15 Fullstack Web Apps 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 Web Apps?

No se requiere experiencia previa. Next.js 15 Fullstack Web Apps 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 3 de 4.

¿Cuánto tiempo toma la lección «Fundamentos de páginas, layouts y enrutamiento»?

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 Web Apps?

Sí. Cada lección de Next.js 15 Fullstack Web Apps 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

  1. Introducción a Next.js 15
  2. Configuración del proyecto
  3. Fundamentos de páginas, layouts y enrutamiento
  4. Metadatos, SEO y el encabezado del documento
← Volver a Next.js 15 Fullstack Web Apps