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:

export 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:

export 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:

export 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:

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

Faça um slot dinâmico para a barra lateral direita.

Faça um slot dinâmico para a barra lateral esquerda.