NextJS - Desvendando os Segredos dos Layouts

Neste vídeo, exploramos o sistema de layouts do Next.js, entendendo como componentes de layout funcionam e como eles se relacionam com o conteúdo das páginas através da propriedade children.

O Layout Raiz (Root Layout)

Todo projeto Next.js com App Router possui um arquivo obrigatório:

1app/layout.tsx

Este componente serve como base para toda a aplicação:

Define a estrutura HTML básica
Recebe a propriedade children que contém o conteúdo da página atual
É renderizado em todas as rotas da aplicação

1// Exemplo básico
2 export default function RootLayout({ children, }: { children: React.ReactNode }) {
3 return (
4 <html lang="pt-BR">
5   <body>
6     <p>Conteúdo fixo do layout</p>
7   {children}   
8   </body>  
9 </html> 
10)}

Como Funciona a Propriedade Children

A propriedade children é um conceito fundamental do React:

Permite composição de componentes
Tudo que é colocado entre as tags de abertura e fechamento de um componente se torna seu children
No Next.js, o conteúdo da página atual é injetado como children no layout

1// Exemplo de componente com children 
2 function Title({ children }: { children: React.ReactNode }) {
3 return (
4 <div className="title-container"> {children} </div> 
5) } 
6// Uso do componente
7 <Title> <h1>Meu Título</h1> <p>Subtítulo</p> </Title>

Layouts Aninhados

Podemos criar layouts específicos para grupos de rotas:

Crie um arquivo layout.tsx dentro de uma pasta de rota
Este layout será aplicado a todas as rotas dentro dessa pasta e suas subpastas
Herda o layout pai (se existir) e adiciona novas camadas

1app/ 
2   detalhes/
3     layout.tsx  # Layout específico para /detalhes  
4    page.tsx  
5layout.tsx      # Layout raiz

Vantagens do Sistema de Layouts

Evita repetição de código: Elementos comuns como cabeçalhos e rodapés ficam em um só lugar
Transições suaves: Apenas a parte do children muda entre rotas
Organização clara: Cada seção da aplicação pode ter seu próprio layout
Performance: O Next.js otimiza a renderização dos layouts