Enrutamiento, Fundamentos del enrutamiento en Next.js

Elementos del enrutamiento en Next.js

El App Router

En la versión 13 de Next.js, el App Router esta construido sobre React Server Components (Componentes de React de Servidor), los cuales permiten utilizar layouts compartidos, rutas anidadas, loading states, manejo de errores y más.

El App Router existe en el directorio app que funciona conjuntamente con pages, permitiendo así una migración progresiva desde este último.

El enrutamiento app toma prioridad sobre pages, los directorios no deben resolver a la misma URL ya que esto generará un error.

Por default los componentes que se encuentran dentro de app son Server Components (Componentes de Servidor). Esto es una característica que permite optimizar el performance, además también es posible utilizar los Client Components (Componentes de Cliente).

Roles de directorios y archivos

Next.js utiliza un sistema de enrutamiento basado en archivos en donde:

• Los directorios son utilizados como rutas. Una ruta es un path a un directorio anidado, que utiliza un sistema de jerarquías que va desde el directorio raíz hasta el último archivo en el árbol.

• Los archivos son usados para crear interfaces de usuario, que son mostradas en una ruta.

Segmentos de una ruta

Cada directorio representa un segmento de una ruta, cada segmento de ruta es mapeado a un segmento correspondiente de una dirección web.

acme.com/dashboard/settings

|- app
    |- dashboard
        |- settings

• app (Directorio raíz)
• dashboard (Segmento)
• settings (Hoja o segmento final)

Rutas anidadas

Para crear una ruta anidada, es necesario anidar directorios dentro de otros. Por ejemplo es posible crear la ruta /dashboard/settings anidando dos directorios: dashboard y dentro de este settings.

Convenciones de archivos

Next.js provee una lista de archivos especiales para crear una interfaz de usuario con un comportamiento específico en rutas anidadas:

Jerarquía de los componentes

Los componentes de React son definidos en archivos especiales de un segmento de ruta son rendereados con una jerarquía específica.

1. layout.js
2. template.js
3. error.js
4. loading.js
5. not-found.js
6. page.js o layout.js anidado.

<Layout>
    <Template>
        <ErrorBoundary fallback={<Error />}>
            <Suspense fallback={<Loading />}>
                <ErrorBoundary fallback={<NotFound />}>
                    <Page />
                </ErrorBoundary>
            </Suspense>
        </ErrorBoundary>
    </Template>
</Layout>

En las rutas anidadas, los componentes de un segmento se anidan dentro de los componentes de su padre.

- dashboard
  - layout.js
  - error.js
  - loading.js
  - settings
    - layout.js
    - error.js
    - loading.js
    - page.js

<Layout>
    <ErrorBoundary fallback={<Error />}>
        <Suspense fallback={<Loading />}>
            <Layout>
                <ErrorBoundary fallback={<Error />}>
                    <Suspense fallback={<Loading />}>
                        <Page />
                    </Suspense>
                </ErrorBoundary>
            </Layout>
        </Suspense>
    </ErrorBoundary>
</Layout>

Colocación

Además de los archivos especiales, es posible colocar tus propios archivos (componentes, estilos, pruebas, etc.) dentro del directorio app.

Esto ya que las rutas se definen por directorios, pero solo aquellos con un archivo page.jso route.js son desplegados por Next.js.

- app
  - components
    - buttons.js            // no se muestra
  - lib
    - constants.js          // no se muestra
  - dashboard
    - page.js               // visible
    - nav.js                // no se muestra
  - api
    - route.js              // visible
    - db.js                 // no se muestra

Patrones de enrutamiento avanzado

El App Router también proporciona un conjunto de convenciones para ayudarte a implementar patrones de enrutamiento más avanzados. Estos incluyen:

Parallel Routes (Rutas Paralelas): Te permiten mostrar simultáneamente dos o más páginas en la misma vista que pueden ser navegadas de manera independiente. Puedes usarlas para vistas divididas que tienen su propia sub-navegación. Ej. Dashboards.

Intercepting Routes (Rutas de Intercepción): Te permiten interceptar una ruta y mostrarla en el contexto de otra ruta. Puedes usarlas cuando es importante mantener el contexto de la página actual. Ej. Ver todas las tareas mientras editas una tarea o expandir una foto en un feed.

Estos patrones te permiten construir interfaces de usuario más ricas y complejas, democratizando características que históricamente eran complejas para equipos pequeños y desarrolladores individuales de implementar.

Conclusiones

El enrutamiento en Next.js, especialmente con la introducción del App Router en la versión 13, ofrece una flexibilidad y eficiencia sin precedentes para la creación de aplicaciones web modernas. Al aprovechar los React Server Components, los desarrolladores pueden optimizar el rendimiento y la experiencia del usuario mediante el uso de componentes de servidor y cliente. La estructura basada en archivos y directorios facilita la organización y el mantenimiento del código, mientras que las convenciones y patrones avanzados como Parallel Routes e Intercepting Routes permiten la creación de interfaces de usuario complejas y ricas en funcionalidades. En resumen, Next.js proporciona un sistema de enrutamiento robusto y escalable que puede adaptarse a las necesidades de cualquier proyecto, desde aplicaciones simples hasta plataformas complejas, democratizando así el desarrollo de aplicaciones web de alta calidad.