Roteamento Paralelo em NextJS

No NextJS, é possível fazer com que uma parte do site exiba conteúdo variado dependendo da URL solicitada. Isso é chamado de roteamento paralelo.

Vamos ver um exemplo. Suponha que temos o seguinte layout de site:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          cabeçalho
        </header>
        <main>
          {children}
        </main>
        <footer>
          rodapé
        </footer>
      </body>
    </html>
  );
}

Suponha que queremos que no cabeçalho seja exibida informação dinâmica. Suponha que na URL /users seja exibido um componente com usuários, e na URL /posts um componente com posts.

Para esse roteamento paralelo é necessário criar uma pasta especial, iniciando seu nome com o símbolo @. Por exemplo, vamos nomear nossa pasta como @info.

Nesta pasta, colocaremos dois componentes. O primeiro para exibir usuários na pasta /users/, e o segundo para exibir posts na pasta /posts/. Teremos a seguinte estrutura de arquivos:

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

Agora, precisamos escrever um comando especial de inserção no layout do site. Para isso, devemos usar um slot dinâmico especial.

Para entender o que é isso, primeiro veja o parâmetro da função do nosso layout de site:

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

Observe que o parâmetro é um objeto, do qual extraímos o conteúdo do site na variável children.

Este objeto pode ter outras chaves. Elas correspondem às pastas cujos nomes foram iniciados com @.

No nosso caso, temos a pasta @info, o que significa que teremos disponível a variável info, que, dependendo da URL, conterá o texto de um dos componentes - usuários ou posts. Vamos obter essa variável:

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

Agora, dentro do layout podemos exibir a variável info. Neste local, dependendo da URL, será inserido o texto de um dos nossos componentes:

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