veja nossos vídeos mais recentes e esteja por dentro de muitas novidades.

Explorando a estrutura gerada pelo Create React App, entendendo o papel das pastas public e src, os conceitos de Virtual DOM, JSX e componentes, além de como o CSS é aplicado nos projetos React.

Explorando a criação de um layout fixo para a aplicação React, com barra lateral, barra superior e área dinâmica para conteúdo. Utilizando o React Router Dom v6 para gerenciar navegação entre rotas.

Abordando técnicas para organizar estilos em React, utilizando seletores CSS, CSS Modules, integração com React Router, reset CSS eficiente e boas práticas para garantir consistência visual e manutenibilidade.
Neste artigo, vamos explorar como implementar rotas paralelas no Next.js, uma funcionalidade poderosa que permite renderizar múltiplas páginas simultaneamente na mesma URL.
Rotas paralelas permitem que você renderize duas ou mais páginas no mesmo layout simultaneamente. Elas são especialmente úteis para:
Para criar rotas paralelas, usamos uma convenção especial de nomenclatura:
1app/
2 cart/
3 @resume/
4 page.tsx
5 @suggestions/
6 page.tsx
7 layout.tsxO prefixo @ indica ao Next.js que esses diretórios representam rotas paralelas. O arquivo layout.tsx receberá essas páginas como props.
O componente de layout recebe as páginas paralelas como propriedades:
1export default function CartLayout({ children, resume, suggestions, }:
2{ children: React.ReactNode, resume: React.ReactNode, suggestions: React.ReactNode }) {
3 const isLoggedIn = true;
4 return (
5 <div> {children} {isLoggedIn && ( <> {resume} {suggestions} </> )} </div> );}Você pode controlar quais páginas são renderizadas com lógica condicional, como no exemplo de verificação de login.
loading.tsx e error.tsxAs rotas paralelas oferecem benefícios significativos:
Para implementações avançadas, considere:
Rotas paralelas representam uma evolução na arquitetura de aplicações Next.js, permitindo criar interfaces complexas enquanto mantém a simplicidade do modelo de roteamento baseado em arquivos.