Definición de rutas

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

Esta guía le mostrará cómo definir y organizar rutas en su aplicación Next.js.

Creación de rutas

Next.js utiliza un enrutador basado en sistema de archivos donde las carpetas definen las rutas.

Cada carpeta representa un segmento de ruta que se mapea a un segmento de URL. Para crear una ruta anidada, puede anidar carpetas dentro de otras.

Se utiliza un archivo especial page.js 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 para mostrar UI única de una ruta, y diseños (layouts) para mostrar UI compartida entre múltiples rutas.

Por ejemplo, para crear su primera página, agregue un archivo page.js dentro del directorio app y exporte un componente de React:

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

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