Enrutamiento Paralelo en NextJS

En NextJS es posible hacer que una parte del sitio muestre contenido diferente dependiendo de la URL solicitada. Esto se llama enrutamiento paralelo.

Veamos un ejemplo. Supongamos que tenemos el siguiente diseño de sitio:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          encabezado
        </header>
        <main>
          {children}
        </main>
        <footer>
          pie de página
        </footer>
      </body>
    </html>
  );
}

Supongamos que queremos que en el encabezado se muestre información dinámica. Que en la URL /users se muestre un componente con usuarios, y en la URL /posts un componente con publicaciones.

Para este enrutamiento paralelo es necesario crear una carpeta especial, comenzando su nombre con el símbolo @. Para el ejemplo, llamemos a nuestra carpeta @info.

En esta carpeta colocaremos dos componentes. El primero para mostrar usuarios en la carpeta /users/, y el segundo para mostrar publicaciones en la carpeta /posts/. Obtendremos la siguiente estructura de archivos:

• /app//@info//users/page.jsx/posts/page.jsx

Ahora necesitamos en el diseño del sitio escribir un comando especial para la inserción. Para esto es necesario utilizar una ranura dinámica especial.

Para entender qué es, primero mire el parámetro de la función de nuestro diseño de sitio:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    
  );
}

Preste atención al hecho de que como parámetro se nos pasa un objeto, del cual extraemos el contenido del sitio en la variable children.

En este objeto puede haber otras claves. Estas corresponden a aquellas carpetas cuyo nombre comenzamos con @.

En nuestro caso, tenemos la carpeta @info, lo que significa que tendremos disponible la variable info, que dependiendo de la URL contendrá el texto de uno de los componentes - usuarios o publicaciones. Obtengamos esta variable:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    
  );
}

Ahora dentro del maquetado del diseño podemos mostrar la variable info. En este lugar, dependiendo de la URL, se insertará el texto de uno de nuestros componentes:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    <html lang="en">
      <body>
        <header>
          <div>
            {info}
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          pie de página
        </footer>
      </body>
    </html>
  );
}