Summary
This chapter demonstrates how to create a reusable layout component that composes shared UI elements (such as a side navigation) and renders nested content via a children prop, leveraging framework conventions for route-level layouts.

General domain of usage
Web application dashboards

Vamos projetar um layout para todo o aplicativo. Neste cenário, será criado um componente que auxilia na navegação entre as páginas do aplicativo e também oferece a opção de sair (mais detalhes sobre autorização nos próximos capítulos).

## De volta ao projeto
Agora, gere um `layout.tsx` para o dashboard. Dentro da pasta `/dashboard`, adicione um novo arquivo chamado `layout.tsx` e insira o seguinte código:

Neste código, algumas ações principais estão ocorrendo. Veja mais de perto:
- O componente `<SideNav />` está sendo importado e incluído no layout. Qualquer componente importado aqui passa a fazer parte do design geral da página;
- O componente `<Layout />` possui uma propriedade `children`. Esse "filho" pode ser uma página ou outro layout. Especificamente, as páginas localizadas em `/dashboard` serão automaticamente inseridas dentro de um `<Layout />`.


Agora, tente seguir o link <a href="http://localhost:3000/dashboard" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> http://localhost:3000/dashboard</a> e navegue entre a página de dashboard e a página de faturas.

Aprenda a construir aplicações web modernas e de alto desempenho utilizando Next.js. Configure projetos com layouts estruturados, estilização e roteamento para navegação fluida. Busque e exiba dados de forma eficiente, otimizando a renderização e o desempenho. Implemente recursos avançados como paginação, operações CRUD e busca global para aplicações web dinâmicas. Faça o deploy de seus projetos Next.js, conecte-os a bancos de dados e adicione autenticação para proteger os dados dos usuários.

Vamos discutir o que é necessário aprender antes de começar com o framework Next.js, o que esperar deste curso e o que será desenvolvido.

Vamos configurar o projeto, analisar formas de adicionar estilos ao nosso aplicativo e abordar aspectos visuais como imagens, fontes, páginas e layouts.

Aprenda a criar e gerenciar facilmente uma nova visualização para seu aplicativo e navegar por todas as páginas de forma fluida com um sistema de roteamento incorporado.

Implemente o aplicativo Next.js utilizando contas do GitHub e Vercel. Além disso, estabeleça um banco de dados para fornecer os dados necessários ao aplicativo.

Considere como obter e apresentar dados ao usuário de forma clara e eficiente.

Descubra como implementar recursos modernos da web, como paginação, operações CRUD, busca global, validação de formulários e mais.

Implementação de autenticação no Next.js.

Construindo um Componente de Layout Comum

De volta ao projeto

Awesome!

Construindo um Componente de Layout Comum

De volta ao projeto