Cómo crear diseños y páginas

Next.js utiliza enrutamiento basado en el sistema de archivos, lo que significa que puedes usar carpetas y archivos para definir rutas. Esta página te guiará sobre cómo crear diseños y páginas, y enlazarlos entre sí.

Creando una página

Una página es una interfaz de usuario que se renderiza en una ruta específica. Para crear una página, añade un archivo page dentro del directorio app y exporta por defecto un componente React. Por ejemplo, para crear una página de inicio (/):

export default function Page() {
  return <h1>Hello Next.js!</h1>
}

Creando un diseño

Un diseño es una interfaz de usuario que se comparte entre múltiples páginas. Durante la navegación, los diseños preservan el estado, permanecen interactivos y no se vuelven a renderizar.

Puedes definir un diseño exportando por defecto un componente React desde un archivo layout. El componente debe aceptar una prop children que puede ser una página u otro diseño anidado.

Por ejemplo, para crear un diseño que acepte tu página de inicio como hijo, añade un archivo layout dentro del directorio app:

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {/* UI del diseño */}
        {/* Coloca children donde quieras renderizar una página o diseño anidado */}
        <main>{children}</main>
      </body>
    </html>
  )
}

El diseño anterior se llama diseño raíz porque está definido en la raíz del directorio app. El diseño raíz es obligatorio y debe contener las etiquetas html y body.

Creando una ruta anidada

Una ruta anidada es una ruta compuesta por múltiples segmentos de URL. Por ejemplo, la ruta /blog/[slug] está compuesta por tres segmentos:

/ (Segmento raíz)
blog (Segmento)
[slug] (Segmento hoja)

En Next.js:

Las carpetas se usan para definir los segmentos de ruta que mapean a segmentos de URL.
Los archivos (como page y layout) se usan para crear la interfaz de usuario que se muestra para un segmento.

Para crear rutas anidadas, puedes anidar carpetas dentro de otras. Por ejemplo, para añadir una ruta para /blog, crea una carpeta llamada blog en el directorio app. Luego, para hacer /blog públicamente accesible, añade un archivo page.tsx:

File hierarchy showing blog folder and a page.js file

// Importaciones de ejemplo
import { getPosts } from '@/lib/posts'
import { Post } from '@/ui/post'

export default async function Page() {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <Post key={post.id} post={post} />
      ))}
    </ul>
  )
}

Puedes continuar anidando carpetas para crear rutas anidadas. Por ejemplo, para crear una ruta para una publicación de blog específica, crea una nueva carpeta [slug] dentro de blog y añade un archivo page:

File hierarchy showing blog folder with a nested slug folder and a page.js file

function generateStaticParams() {}

export default function Page() {
  return <h1>Hello, Blog Post Page!</h1>
}

Envolver un nombre de carpeta en corchetes (ej. [slug]) crea un segmento de ruta dinámico que se usa para generar múltiples páginas desde datos. Ej. publicaciones de blog, páginas de productos, etc.

Anidando diseños

Por defecto, los diseños en la jerarquía de carpetas también están anidados, lo que significa que envuelven diseños hijos a través de su prop children. Puedes anidar diseños añadiendo layout dentro de segmentos de ruta específicos (carpetas).

Por ejemplo, para crear un diseño para la ruta /blog, añade un nuevo archivo layout dentro de la carpeta blog.

File hierarchy showing root layout wrapping the blog layout

export default function BlogLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section>{children}</section>
}

Si combinaras los dos diseños anteriores, el diseño raíz (app/layout.js) envolvería el diseño del blog (app/blog/layout.js), que a su vez envolvería la página del blog (app/blog/page.js) y la página de publicación (app/blog/[slug]/page.js).

Creando un segmento dinámico

Los segmentos dinámicos te permiten crear rutas generadas desde datos. Por ejemplo, en lugar de crear manualmente una ruta para cada publicación de blog, puedes crear un segmento dinámico para generar las rutas basadas en los datos de las publicaciones.

Para crear un segmento dinámico, envuelve el nombre del segmento (carpeta) en corchetes: [segmentName]. Por ejemplo, en la ruta app/blog/[slug]/page.tsx, [slug] es el segmento dinámico.

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}

Aprende más sobre Segmentos Dinámicos.

Enlazando entre páginas

Puedes usar el componente <Link> para navegar entre rutas. <Link> es un componente integrado de Next.js que extiende la etiqueta HTML <a> para proporcionar precarga y navegación del lado del cliente.

Por ejemplo, para generar una lista de publicaciones de blog, importa <Link> desde next/link y pasa una prop href al componente:

import Link from 'next/link'

export default async function Post({ post }) {
  const posts = await getPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>
          <Link href={`/blog/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  )
}

<Link> es la forma principal y recomendada para navegar entre rutas en tu aplicación Next.js. Sin embargo, también puedes usar el hook useRouter para navegación más avanzada.

Creando una página

Creando un diseño

Creando una ruta anidada

Anidando diseños

Creando un segmento dinámico

Enlazando entre páginas

layout.js

page.js

Link

Segmentos Dinámicos

On this page