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   mostraría el Panel del usuario, mientras que   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. /dashboard/user /dashboard/team  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   es el método utilizado para configurar estos espacios, como lo demuestra la nota de la documentación: @folder  "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} </> ); }    función   se usa para determinar el tipo de usuario, que, a su vez, dicta si se muestra el espacio del   o   . Nota: En el código anterior, la getCurrentUserType() user 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   ), también hay un espacio implícito o automático. @folder  La documentación explica que el  "   es este tipo de espacio automático y no necesitamos asociarlo con una   . Por lo tanto,   funciona igual que   ". children @folder dashboard/page.js 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   , crearemos el componente para mostrar y simular un tiempo de carga para comprender la secuencia visual en la que se cargan los componentes: app/@folder1/page.js   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   , ajuste el código de diseño para acomodar las dos carpetas: app/layout.js   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    establece que: La documentación de Next.Js  El archivo especial   lo ayuda a crear una interfaz de usuario de carga significativa con   . Con esta convención, puede mostrar un   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. loading.js React Suspense estado de carga instantáneo  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:    comunidad     comunidad          dev.to @leandro_nnz hackernoon.com @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   en  Markus Spiske Unsplash

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Este audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Make resilience your competitive advantage

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Crecimiento de las criptomonedas: creación de perfiles de usuarios eficaces

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps