Next.Js 13 rotas paralelas: um guia completo

1. Introdução

Olá!

Bem-vindo a este guia abrangente sobre rotas paralelas em Next.js.

À medida que o cenário digital evolui, também evoluem as complexidades do desenvolvimento da web. Os aplicativos da Web modernos exigem não apenas mecanismos de roteamento robustos, mas também versáteis para aprimorar a experiência do usuário e acomodar estruturas de design complexas.

Este artigo foi elaborado meticulosamente para entender o poderoso recurso introduzido no Next.js 13.3 - Rotas Paralelas.

O objetivo é duplo: em primeiro lugar, fornecer uma compreensão clara da importância das rotas paralelas e suas aplicações práticas e, em segundo lugar, oferecer insights práticos sobre como implementá-los com eficiência em seus projetos Next.js.

Vamos começar esta jornada para explorar o potencial transformador das rotas paralelas e como elas estão redefinindo os limites do design de aplicativos da web.

2. O mundo antes das rotas paralelas

Antes do início das rotas paralelas, os desenvolvedores da Web eram limitados em como poderiam estruturar e exibir o conteúdo dinamicamente em uma única exibição. Os mecanismos de roteamento tradicionais eram bastante lineares: um URL, uma exibição.

Por exemplo, considere um design de painel 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 para /dashboard/user renderizaria o Painel do usuário, enquanto /dashboard/team mostraria o Painel da equipe. Os dois eram mutuamente exclusivos. Para visualizar um segmento diferente, um usuário normalmente teria que sair totalmente de sua visualização atual.

Isso representava desafios, especialmente quando os desenvolvedores queriam exibir vários segmentos de um site simultaneamente ou condicionalmente. A abordagem de roteamento tradicional carecia de flexibilidade, dificultando a criação de layouts complexos e interativos, como painéis lado a lado ou modais sem recorrer ao gerenciamento de estado intrincado ou soluções alternativas.

Felizmente, com a evolução de estruturas como o Next.js e a introdução de rotas paralelas, esse cenário foi drasticamente alterado, dando início a uma nova era de web design dinâmico e adaptativo.

3. Entendendo Rotas Paralelas

Rotas paralelas são recursos inovadores introduzidos no Next.js 13.3, alterando significativamente a forma como os desenvolvedores abordam o roteamento e a apresentação de conteúdo na web.

3.1 Introdução às Rotas Paralelas:

O Next.js 13.3 traz uma nova convenção dinâmica, permitindo a implementação de casos de roteamento mais avançados. Conforme consta na documentação,

"As rotas paralelas permitem que você mostre mais de uma página na mesma exibição, como em painéis ou modais complexos. Com as rotas paralelas, você pode renderizar simultaneamente uma ou mais páginas na mesma exibição que podem ser navegadas independentemente."

Em termos mais simples, diferentes componentes ou seções de seu aplicativo podem carregar simultaneamente, dando uma sensação de fluidez e capacidade de resposta, especialmente se determinados componentes demorarem mais devido à busca de dados ou renderização.

3.2 Casos de uso: painéis, modais e mais:

A estrutura dos aplicativos da Web modernos geralmente exige layouts avançados que combinam várias visualizações ou exigem pop-ups contextuais sem perder o conteúdo subjacente.

Veja o exemplo da documentação:

 dashboard |__ @user |____ page.js |__ @team |____ page.js |__layout.js |__ page.js

Este layout demonstra como as Rotas Paralelas podem ser empregadas para exibir simultaneamente painéis de usuários e equipes na mesma exibição usando "slots" nomeados, um recurso nativo dessa nova abordagem de roteamento.

3.3 Benefícios: Visualização de Múltiplas Páginas, Renderização Condicional, Navegação Independente:

As vantagens das Rotas Paralelas são múltiplas. Como destacado, eles permitem:

"renderização simultânea de uma ou mais páginas na mesma visualização que podem ser navegadas de forma independente".

Além disso, eles podem ser aproveitados para renderização condicional de páginas, oferecendo assim um nível sem precedentes de flexibilidade e dinamismo para aplicativos da web.

Em essência, com o advento das Rotas Paralelas, os desenvolvedores da Web agora estão mais bem equipados para construir interfaces da Web intrincadas, dinâmicas e fáceis de usar, feitas sob medida para as necessidades em evolução da Web moderna.

4. Como funcionam as rotas paralelas

Aprofundar-se nas rotas paralelas mostra como o Next.js 13.3 foi desenvolvido de maneira inteligente. Vamos detalhar passo a passo.

4.1 Apresentando "Slots" e a convenção @folder:

O conceito de "slots" está no cerne do Parallel Routes. Pense nos slots como áreas designadas que podem exibir diferentes páginas ou partes do seu site.

A convenção @folder é o método usado para configurar esses slots, conforme evidenciado pela nota da documentação:

"Rotas paralelas usam esses 'slots' nomeados, definidos usando o método @folder."

• Explicação do código:

  
  

  • Estrutura de Pastas para Rotas Paralelas: Considere este exemplo:

     dashboard |__ @user │____ page.js |__ @team |____ page.js |__ layout.js |__ utilities.js |__ page.js

    Aqui, '@user' e '@team' atuam como contêineres para diferentes conteúdos, permitindo-nos projetar nosso site com mais flexibilidade.

    
    

  • Como os layouts usam slots como adereços: com base na documentação, o layout dentro do mesmo segmento de rota pode utilizar esses slots como adereços. Aqui está um exemplo claro:

     export default async function Layout({ children, user, team }) { const userType = getCurrentUserType(); return ( <> {userType === 'user' ? user : team} {children} </> ); }

    
    

  • Observação: no código acima, a função getCurrentUserType() é usada para determinar o tipo de usuário, que, por sua vez, determina se o user ou o slot team é exibido.

    
    

• Slots de rota implícitos x explícitos: um dos pontos fortes do roteamento Next.js é sua flexibilidade. Embora '@user' e '@team' em nosso exemplo sejam slots explícitos que definimos (vinculados diretamente a uma @folder ), também há um slot implícito ou automático.

  
  

• A documentação explica que o

  " children é esse tipo de slot automático e não precisamos associá-lo a uma @folder . Portanto, dashboard/page.js funciona da mesma forma que dashboard/@children/page.js ."

Compreendendo completamente como o Parallel Routes opera, os desenvolvedores podem otimizar os recursos do Next.js 13, criando sites que são mais intuitivos e adaptáveis.

5. Um guia passo a passo sobre como usar rotas paralelas

5.1 Configurando um novo aplicativo Next.js

Comece criando um novo aplicativo Next.js:

 npx create-next-app@latest parallel-routes

Navegue até o diretório do aplicativo recém-criado:

 cd parallel-routes

Inicie o servidor de desenvolvimento:

 yarn dev

5.2 Estruturando o Aplicativo

No diretório do projeto, crie as seguintes pastas e arquivos:

 app |__ @folder1 |____ page.js |__ @folder2 |____ page.js |__ page.js |__ layout.js

5.3 Criando as composições e simulando o carregamento de dados

Em app/@folder1/page.js , criaremos o componente para mostrar e simular um tempo de carregamento para entender a sequência visual em que os componentes são carregados:

 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> }

Da mesma forma, em 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> }

Esses tempos de carregamento simulados permitem que você aprecie visualmente a capacidade das rotas paralelas.

5.4 Atualizar código de layout

Em app/layout.js , ajuste o código do layout para acomodar as duas pastas:

Antes:

 // ... (existing imports) export default function RootLayout({ children }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) }

Depois:

 // ... (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> ); }

Sinta-se à vontade para estilizar o layout da melhor maneira possível para facilitar a leitura

5.5 Adicionar Estados de Carregamento

A documentação do Next.Js afirma que:

O arquivo especial loading.js ajuda você a criar uma UI de carregamento significativa com o React Suspense . Com esta convenção, você pode mostrar um estado de carregamento instantâneo do servidor enquanto o conteúdo de um segmento de rota é carregado. O novo conteúdo é trocado automaticamente assim que a renderização é concluída.

Para cada componente (pasta1 e pasta2), criaremos um estado de carregamento. Sua estrutura de pastas deve ser assim:

 app |__ @folder1 |____ page.js |____ loading.js |__ @folder2 |____ page.js |____ loading.js |__ page.js |__ layout.js

app/@folder1/loading.js

 export default function Loading() { return <p>LOADING FOLDER 1...</p> }

app/@folder2/loading.js

 export default function Loading() { return <p>LOADING FOLDER 2...</p> }

5.6. Modifique a página

Ajuste o conteúdo de app/page.js .

Essa modificação garante que a página principal não mostre nada, deixando as rotas paralelas brilharem:

 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 }

Isenção de responsabilidade

Enquanto praticava com rotas paralelas, descobri que o hot reloading não exibia as rotas como esperado. Não investiguei o problema, então não posso dizer exatamente qual é o problema. Se você encontrar isso, simplesmente reinicie o servidor de desenvolvimento para refletir as alterações.

Conclusão

As rotas paralelas, introduzidas no Next.js 13.3, marcaram um passo significativo no domínio do desenvolvimento web.

Antes de sua criação, os desenvolvedores enfrentavam desafios na exibição de vários segmentos de um site simultaneamente, com o roteamento tradicional oferecendo uma experiência mais linear.

Com rotas paralelas, o Next.js oferece uma abordagem inovadora para web design dinâmico, permitindo a renderização simultânea de várias páginas em uma única exibição.

Esse poderoso recurso não apenas fornece experiência de usuário aprimorada, mas também facilita layouts complexos e renderizações condicionais, ampliando os limites do design de aplicativos da Web contemporâneos.

Seguindo o guia detalhado fornecido acima, os desenvolvedores podem se aprofundar no funcionamento das rotas paralelas, desde a compreensão dos conceitos básicos como "slots" e a convenção '@folder' até a implementação prática usando a estrutura Next.js.

Embora possa haver alguns solavancos, como o notável problema de recarga a quente, a flexibilidade e o dinamismo adicionados aos aplicativos da Web por rotas paralelas fazem a curva de aprendizado valer a pena.

À medida que o cenário digital continua a evoluir, ferramentas e recursos como esses, sem dúvida, desempenharão um papel fundamental na formação do futuro do desenvolvimento da web.

Mais uma vez, obrigado pela paciência e dedicação.

Tem feedback ou perguntas? Sinta-se à vontade para compartilhar. Cada voz agrega valor.

Conecte-se comigo em:

comunidade dev.to @leandro_nnz hackernoon.com comunidade @leandronz hashnode.com leandronnz twitter.com @digpollution

Até a próxima, codificação feliz!

Referências

Você pode encontrar o código completo neste repositório aqui .

Documentação oficial do Next.js aqui .

Para construir este artigo, usei o StackEdit .

Foto de Markus Spiske no Unsplash