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   renderizaria o Painel do usuário, enquanto   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. /dashboard/user /dashboard/team  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   é o método usado para configurar esses slots, conforme evidenciado pela nota da documentação: @folder  "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} </> ); }    função   é usada para determinar o tipo de usuário, que, por sua vez, determina se o   ou o slot   é exibido. Observação: no código acima, a getCurrentUserType() user team  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   ), também há um slot implícito ou automático. @folder  A documentação explica que o  "   é esse tipo de slot automático e não precisamos associá-lo a uma   . Portanto,   funciona da mesma forma que   ." children @folder dashboard/page.js 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   , criaremos o componente para mostrar e simular um tempo de carregamento para entender a sequência visual em que os componentes são carregados: app/@folder1/page.js   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   , ajuste o código do layout para acomodar as duas pastas: app/layout.js   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    afirma que: A documentação do Next.Js  O arquivo especial   ajuda você a criar uma UI de carregamento significativa com   . Com esta convenção, você pode mostrar um   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. loading.js o React Suspense estado de carregamento instantâneo  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       comunidade          dev.to @leandro_nnz hackernoon.com @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   no  Markus Spiske Unsplash

Read My Stories

Portfolio

Hire Me

Buy Me a Coffee

Next.Js 13 Parallel Routes: A Comprehensive Guide

Mastering JavaScript Shorthands

PostgreSQL or MySQL: What Should I Choose for My Full-Stack Project?

Este áudio é produzido no idioma original da história!

Next.Js 13 rotas paralelas: um guia completo

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Aumente sua produtividade com estas 18 ferramentas para desenvolvedores 🚀🔥

Criando produtos criptográficos centrados no usuário: a importância do feedback do cliente

Quer ganhar um concurso de redação do HackerNoon? Aqui está o que os vencedores do concurso #crypto-api recomendam

Crescimento de Criptomoedas: Criando Personas de Usuários Eficazes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps