Creación de diseños y páginas

Hasta ahora, tu aplicación solo tiene una página de inicio. Aprendamos cómo puedes crear más rutas con diseños (layouts) y páginas.

Enrutamiento anidado

Next.js utiliza enrutamiento basado en sistema de archivos donde carpetas se usan para crear rutas anidadas. Cada carpeta representa un segmento de ruta que se mapea a un segmento de URL.

Puedes crear interfaces de usuario separadas para cada ruta usando archivos layout.tsx y page.tsx.

page.tsx es un archivo especial de Next.js que exporta un componente React, y es necesario para que la ruta sea accesible. En tu aplicación, ya tienes un archivo de página: /app/page.tsx - esta es la página de inicio asociada a la ruta /.

Para crear una ruta anidada, puedes anidar carpetas dentro de otras y agregar archivos page.tsx dentro de ellas. Por ejemplo:

/app/dashboard/page.tsx está asociado con la ruta /dashboard. ¡Creemos la página para ver cómo funciona!

Creando la página del dashboard

Crea una nueva carpeta llamada dashboard dentro de /app. Luego, crea un nuevo archivo page.tsx dentro de la carpeta dashboard con el siguiente contenido:

export default function Page() {
  return <p>Página del Dashboard</p>;
}

Ahora, asegúrate de que el servidor de desarrollo esté en ejecución y visita http://localhost:3000/dashboard. Deberías ver el texto "Página del Dashboard".

Así es como puedes crear diferentes páginas en Next.js: crea un nuevo segmento de ruta usando una carpeta y agrega un archivo page dentro de ella.

Al tener un nombre especial para los archivos page, Next.js te permite colocar componentes de UI, archivos de prueba y otro código relacionado con tus rutas. Solo el contenido dentro del archivo page será accesible públicamente. Por ejemplo, las carpetas /ui y /lib están colocadas dentro de la carpeta /app junto con tus rutas.

Práctica: Creando las páginas del dashboard

Practiquemos creando más rutas. En tu dashboard, crea dos páginas más:

1. Página de Clientes: La página debe ser accesible en http://localhost:3000/dashboard/customers. Por ahora, debe devolver un elemento <p>Página de Clientes</p>.
2. Página de Facturas: La página de facturas debe ser accesible en http://localhost:3000/dashboard/invoices. Por ahora, también debe devolver un elemento <p>Página de Facturas</p>.

Tómate un tiempo para resolver este ejercicio, y cuando estés listo, expande el siguiente toggle para ver la solución:

Creando el diseño del dashboard

Los dashboards suelen tener algún tipo de navegación que se comparte entre múltiples páginas. En Next.js, puedes usar un archivo especial layout.tsx para crear una UI compartida entre varias páginas. ¡Creemos un diseño para las páginas del dashboard!

Dentro de la carpeta /dashboard, agrega un nuevo archivo llamado layout.tsx y pega el siguiente código:

import SideNav from '@/app/ui/dashboard/sidenav';
 
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
      <div className="w-full flex-none md:w-64">
        <SideNav />
      </div>
      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
    </div>
  );
}

Hay varias cosas sucediendo en este código, así que analicémoslo:

Primero, estás importando el componente <SideNav /> en tu diseño. Cualquier componente que importes en este archivo será parte del diseño.

El componente <Layout /> recibe una prop children. Este hijo puede ser una página u otro diseño. En tu caso, las páginas dentro de /dashboard se anidarán automáticamente dentro de un <Layout /> así:

Verifica que todo funcione correctamente guardando tus cambios y revisando tu localhost. Deberías ver lo siguiente:

Un beneficio de usar diseños en Next.js es que, al navegar, solo los componentes de página se actualizan mientras que el diseño no se vuelve a renderizar. Esto se llama renderizado parcial que preserva el estado de React en el diseño al transicionar entre páginas.

Diseño raíz

En el Capítulo 3, importaste la fuente Inter en otro diseño: /app/layout.tsx. Como recordatorio:

import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>{children}</body>
    </html>
  );
}

Esto se llama diseño raíz y es requerido en cada aplicación Next.js. Cualquier UI que agregues al diseño raíz se compartirá en todas las páginas de tu aplicación. Puedes usar el diseño raíz para modificar tus etiquetas <html> y <body>, y agregar metadatos (aprenderás más sobre metadatos en un capítulo posterior).

Como el nuevo diseño que acabas de crear (/app/dashboard/layout.tsx) es exclusivo para las páginas del dashboard, no necesitas agregar ninguna UI al diseño raíz anterior.