Next.Js 13 rutas paralelas: una guía completa

1. Introducción

¡Hola!

Bienvenido a esta guía completa sobre rutas paralelas en Next.js.

A medida que evoluciona el panorama digital, también lo hacen las complejidades del desarrollo web. Las aplicaciones web modernas requieren mecanismos de enrutamiento no solo robustos, sino también versátiles para mejorar la experiencia del usuario y adaptarse a estructuras de diseño intrincadas.

Este artículo está meticulosamente diseñado para comprender la poderosa característica introducida en Next.js 13.3 - Rutas paralelas.

El objetivo es doble: en primer lugar, proporcionar una comprensión clara de la importancia de las rutas paralelas y sus aplicaciones prácticas y, en segundo lugar, ofrecer información práctica sobre cómo implementarlas de manera eficiente en sus proyectos Next.js.

Comencemos este viaje para explorar el potencial transformador de las rutas paralelas y cómo están redefiniendo los límites del diseño de aplicaciones web.

2. El mundo antes de las rutas paralelas

Antes del inicio de las rutas paralelas, los desarrolladores web estaban limitados en la forma en que podían estructurar y mostrar contenido de forma dinámica en una sola vista. Los mecanismos de enrutamiento tradicionales eran bastante lineales: una URL, una vista.

Por ejemplo, considere un diseño de tablero típico:

 // pages/dashboard/user.js function User() { return <div>User Dashboard</div>; } // pages/dashboard/team.js function Team() { return <div>Team Dashboard</div>; }

Navegar a /dashboard/user mostraría el Panel del usuario, mientras que /dashboard/team mostraría el Panel del equipo. Los dos eran mutuamente excluyentes. Para ver un segmento diferente, un usuario normalmente tendría que navegar fuera de su vista actual por completo.

Esto planteó desafíos, especialmente cuando los desarrolladores querían mostrar múltiples segmentos de un sitio web de forma simultánea o condicional. El enfoque de enrutamiento tradicional carecía de flexibilidad, lo que dificultaba la creación de diseños complejos e interactivos, como paneles o modales uno al lado del otro, sin recurrir a soluciones complejas o de administración de estado.

Afortunadamente, con la evolución de marcos como Next.js y la introducción de rutas paralelas, este panorama se ha alterado drásticamente, marcando el comienzo de una nueva era de diseño web dinámico y adaptable.

3. Comprender las rutas paralelas

Las rutas paralelas son características innovadoras introducidas en Next.js 13.3, que alteran significativamente la forma en que los desarrolladores abordan el enrutamiento y la presentación de contenido en la web.

3.1 Introducción a Rutas Paralelas:

Next.js 13.3 presenta una nueva convención dinámica que permite la implementación de casos de enrutamiento más avanzados. Como se indica en la documentación,

"Parallel Routes le permite mostrar más de una página en la misma vista, como con cuadros de mando o modales complejos. Con Parallel Routes, puede representar simultáneamente una o más páginas en la misma vista que se pueden navegar de forma independiente".

En términos más simples, diferentes componentes o secciones de su aplicación pueden cargarse simultáneamente, dando una sensación de fluidez y capacidad de respuesta, especialmente si ciertos componentes tardan más en obtener datos o renderizar.

3.2 Casos de uso: paneles, modales y más:

La estructura de las aplicaciones web modernas a menudo exige diseños avanzados que combinan varias vistas o requieren ventanas emergentes contextuales sin perder el contenido subyacente.

Tome el ejemplo de la documentación:

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

Este diseño demuestra cómo se pueden emplear las rutas paralelas para mostrar simultáneamente los tableros de usuario y de equipo en la misma vista usando "ranuras" con nombre, una característica nativa de este nuevo enfoque de enrutamiento.

3.3 Beneficios: vista de varias páginas, representación condicional, navegación independiente:

Las ventajas de las Rutas Paralelas son múltiples. Como se destaca, permiten:

"representación simultánea de una o más páginas en la misma vista que se puede navegar de forma independiente".

Además, se pueden aprovechar para la representación condicional de páginas, lo que ofrece un nivel sin precedentes de flexibilidad y dinamismo para las aplicaciones web.

En esencia, con la llegada de Parallel Routes, los desarrolladores web ahora están mejor equipados para construir interfaces web complejas, dinámicas y fáciles de usar, hechas a medida para las necesidades cambiantes de la web moderna.

4. Cómo funcionan las rutas paralelas

Profundizar en las rutas paralelas muestra cuán inteligentemente está construido Next.js 13.3. Repasemos los detalles paso a paso.

4.1 Introducción a "Slots" y la convención @folder:

El concepto de "tragamonedas" se encuentra en el corazón de Parallel Routes. Piense en las tragamonedas como áreas designadas que pueden mostrar diferentes páginas o partes de su sitio web.

La convención @folder es el método utilizado para configurar estos espacios, como lo demuestra la nota de la documentación:

"Las rutas paralelas usan estas 'ranuras' con nombre, definidas con el método @folder".

• Explicación del código:

  
  

  • Estructura de carpetas para rutas paralelas: Considere este ejemplo:

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    Aquí, '@usuario' y '@equipo' actúan como contenedores para diferentes contenidos, lo que nos permite diseñar nuestro sitio web de manera más flexible.

    
    

  • Cómo los diseños usan las franjas horarias como accesorios: según la documentación, el diseño dentro del mismo segmento de ruta puede utilizar estas franjas horarias como accesorios. He aquí un claro ejemplo:

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • Nota: En el código anterior, la función getCurrentUserType() se usa para determinar el tipo de usuario, que, a su vez, dicta si se muestra el espacio del user o team .

    
    

• Ranuras de ruta implícitas frente a explícitas: uno de los puntos fuertes del enrutamiento de Next.js es su flexibilidad. Si bien '@usuario' y '@equipo' en nuestro ejemplo son espacios explícitos que definimos (vinculados directamente a una @folder ), también hay un espacio implícito o automático.

  
  

• La documentación explica que el

  " children es este tipo de espacio automático y no necesitamos asociarlo con una @folder . Por lo tanto, dashboard/page.js funciona igual que dashboard/@children/page.js ".

Al comprender a fondo cómo funcionan las rutas paralelas, los desarrolladores pueden optimizar las capacidades de Next.js 13, creando sitios web que son más intuitivos y adaptables.

5. Una guía paso a paso sobre cómo usar rutas paralelas

5.1 Configuración de una nueva aplicación Next.js

Comience creando una nueva aplicación Next.js:

 npx create-next-app@latest parallel-routes

Navegue hasta el directorio de la aplicación recién creada:

 cd parallel-routes

Inicie el servidor de desarrollo:

 yarn dev

5.2 Estructuración de la aplicación

En el directorio del proyecto, cree las siguientes carpetas y archivos:

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 Creando los comps y simulando la carga de datos

En app/@folder1/page.js , crearemos el componente para mostrar y simular un tiempo de carga para comprender la secuencia visual en la que se cargan los componentes:

 export default async function Page() { // simulate loading time for 6 seconds await new Promise(resolve => setTimeout(resolve, 6000)); return <h4>FOLDER 1 COMPONENT LOADED</h4> }

Del mismo modo, en app/@folder2/page.js :

 export default async function Page() { // simulate loading time for 8 seconds await new Promise(resolve => setTimeout(resolve, 8000)); return <h4>FOLDER 2 COMPONENT LOADED TWO SECONDS LATER</h4> }

Estos tiempos de carga simulados le permiten apreciar visualmente la capacidad de las rutas paralelas.

5.4 Actualizar código de diseño

En app/layout.js , ajuste el código de diseño para acomodar las dos carpetas:

Antes:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

Después:

 // ... (existing imports) export default function RootLayout({ children, folder1, folder2 }) { return ( <html lang="en"> <body className={inter.className}> <div> {folder1} </div> <div> {folder2} </div> {children} </body> </html> ); }

Siéntase libre de diseñar el diseño lo mejor que pueda para una mejor legibilidad

5.5 Agregar estados de carga

La documentación de Next.Js establece que:

El archivo especial loading.js lo ayuda a crear una interfaz de usuario de carga significativa con React Suspense . Con esta convención, puede mostrar un estado de carga instantáneo desde el servidor mientras se carga el contenido de un segmento de ruta. El nuevo contenido se intercambia automáticamente una vez que se completa el renderizado.

Para cada componente (carpeta 1 y carpeta 2), crearemos un estado de carga. Su estructura de carpetas debería ser así:

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

aplicación/@carpeta1/cargando.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

aplicación/@carpeta2/cargando.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. Modificar la página

Ajuste el contenido de app/page.js .

Esta modificación consigue que la página principal no muestre nada, dejando brillar las rutas paralelas:

 import Image from 'next/image' import styles from './page.module.css' export default function Home() { // anything you add here will be rendered as a children of RootLayout return null }

Descargo de responsabilidad

Mientras practicaba con rutas paralelas, descubrí que la recarga en caliente no mostraba las rutas como se esperaba. No he investigado el problema, así que no puedo decirte exactamente cuál es el problema. Si encuentra esto, simplemente reinicie el servidor de desarrollo para reflejar los cambios.

Conclusión

Las rutas paralelas, introducidas en Next.js 13.3, han marcado un avance significativo en el ámbito del desarrollo web.

Antes de su creación, los desarrolladores enfrentaban desafíos al mostrar múltiples segmentos de un sitio web simultáneamente, con el enrutamiento tradicional ofreciendo una experiencia más lineal.

Con rutas paralelas, Next.js ofrece un enfoque innovador para el diseño web dinámico, lo que permite la representación simultánea de varias páginas en una sola vista.

Esta poderosa función no solo brinda una experiencia de usuario mejorada, sino que también facilita diseños complejos y representaciones condicionales, lo que amplía los límites del diseño de aplicaciones web contemporáneas.

Al seguir la guía detallada proporcionada anteriormente, los desarrolladores pueden profundizar en el funcionamiento de las rutas paralelas, desde comprender los conceptos básicos como "ranuras" y la convención '@carpeta' hasta la implementación práctica utilizando el marco Next.js.

Si bien puede haber algunos baches, como el problema de recarga en caliente señalado, la flexibilidad y el dinamismo agregados a las aplicaciones web mediante rutas paralelas hacen que la curva de aprendizaje valga la pena.

A medida que el panorama digital continúa evolucionando, herramientas y características como estas, sin duda, desempeñarán un papel fundamental en la configuración del futuro del desarrollo web.

Una vez más, gracias por su paciencia y dedicación.

¿Tienes comentarios o preguntas? Sientete libre para compartir. Cada voz agrega valor.

Conéctate conmigo en:

dev.to comunidad @leandro_nnz hackernoon.com comunidad @leandronz hashnode.com leandronnz twitter.com @digpollution

Hasta la próxima, ¡feliz codificación!

Referencias

Puede encontrar el código completo en este repositorio aquí .

Documentación oficial de Next.js aquí .

Para construir este artículo, utilicé StackEdit .

Foto de Markus Spiske en Unsplash