Lección 17. Rutas Paralelas.
Las rutas paralelas permiten la implementación y renderizado de diferentes rutas dentro de layouts.
Tal cual seria trabajar en Módulos para una página.
Veamos una mejor interpretación.
Ejemplo explicativo._
Supongamos que deseamos realizar una pagina de un Dashboard, donde en este, contenga elementos como apartado de:
Analiticas.
Chat.
Video.
Pagina a mostrar.
Veamos la estructura base de nuestro proyecto que deberíamos tener.
|-.next/
|-node-modules/
|-public/
|-src/
|-app/
|-layout.tsx
|-page.tsx
|-dashboard/
|-layout.tsx
|-page.tsx
|- ... Otros directorios...
|- ...Otros archivos...Agregado de rutas paralelas._
Para agregar rutas paralelas, Next.js permite su creación de manera muy sencilla. Para ello, debemos:
Definir nuestros directorios, dentro del directorio de la ruta a la que deseamos ser paralelo.
Definir el nombre de directorios paralelos con inicial de "@".
Agregar a cada directorio paralelo su propio page.tsx con su contenido.
Modificaremos nuestra estructura a:
|-.next/
|-node-modules/
|-public/
|-src/
|-app/
|-layout.tsx
|-page.tsx
|-dashboard/
|-layout.tsx
|-page.tsx
|-@analytics/
|-page.tsx
|-@chat/
|-page.tsx
|-@video/
|-page.tsx
|- ... Otros directorios...
|- ...Otros archivos...Dentro de cada directorio, colocaremos contenido similar a:
app/dashboard/page.tsx:
export default function Dashboard () {
return (
<h1>Dashboard</h1>
);
}app/dashboard/@analytics/page.tsx:
export default function Analiticas () {
return (
<h1>Analiticas</h1>
);
}app/dashboard/@chat/page.tsx:
export default function Chat () {
return (
<h1>Chat</h1>
);
}app/dashboard/@video/page.tsx:
export default function Video () {
return (
<h1>Video</h1>
);
}Ahora, dentro de nuestro archivo app/dashboard/layout.tsx:
// Exporta un componente llamado RootLayout como función por defecto
export default function RootLayout({
children, // Contenido principal de la página (renderizado dinámicamente)
analytics, // Componente o sección específica para análisis (por ejemplo, gráficas, estadísticas)
chat, // Componente o sección de chat (por ejemplo, chat en tiempo real)
video // Componente o sección para contenido de video (por ejemplo, una videollamada o stream)
}: {
children: React.ReactNode; // Se espera que cada prop sea un nodo React válido (JSX, texto, etc.)
analytics: React.ReactNode;
chat: React.ReactNode;
video: React.ReactNode;
}) {
return (
<>
{/* Sección principal del contenido de la página */}
<article>{children}</article>
{/* Sección lateral o secundaria que contiene distintos módulos */}
<section>
{/* Área para estadísticas o información de análisis */}
<aside>{analytics}</aside>
{/* Área para la funcionalidad de chat */}
<aside>{chat}</aside>
{/* Área para contenido de video */}
<aside>{video}</aside>
</section>
</>
)
}Las rutas paralelas NO necesitan ser importadas, sino que son obtenidos por definición de nombre, tal como el típico children.
Las rutas paralelas podría decirse que son componentes los cuales son utilizados dentro de layouts, por lo que si tenemos agrupación de rutas, estos se renderizarán en cada uno de los page agrupados.
Nota: Los directorios con inicial @ NO son definidos como rutas dentro de nuestra aplicación, por lo que:
/dashboard/@chat
/dashboard/@video
/dashboard/@analytics
NO existen como rutas.