Definición de rutas

Recomendamos leer la página Fundamentos de enrutamiento (Routing) antes de continuar.

Esta página te guiará sobre cómo definir y organizar rutas en tu aplicación Next.js.

Creación de rutas

Next.js utiliza un enrutador basado en sistema de archivos donde las carpetas se usan para definir rutas.

Cada carpeta representa un segmento de ruta (route segment) que se mapea a un segmento de URL. Para crear una ruta anidada (nested route), puedes anidar carpetas dentro de otras.

Un archivo especial page.js se utiliza para hacer accesibles públicamente los segmentos de ruta.

En este ejemplo, la ruta URL /dashboard/analytics no es accesible públicamente porque no tiene un archivo page.js correspondiente. Esta carpeta podría usarse para almacenar componentes, hojas de estilo, imágenes u otros archivos colocalizados.

Nota importante: Las extensiones de archivo .js, .jsx o .tsx pueden usarse para archivos especiales.

Creación de interfaz de usuario

Se utilizan convenciones de archivos especiales para crear la interfaz de usuario de cada segmento de ruta. Las más comunes son páginas (pages) para mostrar UI única de una ruta, y diseños (layouts) para mostrar UI compartida entre múltiples rutas.

Por ejemplo, para crear tu primera página, añade un archivo page.js dentro del directorio app y exporta un componente de React:

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

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