Enrutamiento, Definición de Rutas

¿Cómo definir rutas en NextJS?

Next.js utiliza un router (enrutador) basado en el sistema de archivos donde las carpetas se utilizan para definir rutas.

Cada carpeta representa un segmento de ruta que se asigna a un segmento de URL. Para crear una ruta anidada, puedes anidar carpetas entre sí.

📁 app                          Root
    📁 dashboard                Segmento
    📁 settings                 Último segmento

Un archivo llamado page.js es utilizado para hacer públicos segmentos de la ruta.

📁 app                          /
    📄 page.js
    📁 dashboard                /dashboard
        📄 page.js
        📁 settings             /dashboard/settings/
            📄 page.js
        📁 analytics            Ruta que no se muestra

En el ejemplo anterior, la dirección /dashboard/analytics no es pública, ya que carece de un archivo page.js. Este directorio puede ser entonces utilizado para crear componentes.

Creando interfaces de usuario

Existen diferentes convenciones para mostrar contenido en segmentos de rutas como: layouts, pages, loading, not-found, etc. De todos estos el mas común son las pages que muestran el contenido de una ruta, así como los layouts que corresponden a la interfaz de usuario utilizada a través de múltiples rutas.

Para crear una página en el home de nuestro proyecto, solo creamos un archivo page.tsx en el directorio app.

export default function Page() {
    return <h1>Hola Mundo</h1>
}

Conclusiones

En resumen, Next.js simplifica el enrutamiento mediante el uso de un sistema de archivos intuitivo, donde las carpetas y archivos definen las rutas y su estructura. La creación de interfaces de usuario se facilita con convenciones claras como layouts y pages, permitiendo una organización coherente y eficiente del contenido. Al seguir estas prácticas, los desarrolladores pueden construir aplicaciones Next.js robustas y bien estructuradas, mejorando tanto la experiencia del usuario como la mantenibilidad del código.