Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Next.js é uma estrutura poderosa para criar aplicativos React de alto desempenho. Um de seus recursos é a capacidade de criar layouts personalizados para suas páginas, permitindo que você crie um design consistente, fácil de manter e atualizar em seu aplicativo.

Criando um componente de layout personalizado em Avançar. js

Na pasta chamada componentes em seu projeto Next.js, crie Layout.jsx e adicione o código a seguir para criar o componente de layout.

importar Cabeça de'próximo/cabeça'
importar Cabeçalho de'./Header.jsx'
importar Rodapé de'./Rodapé.jsx'
const Disposição = (crianças) => (



Meu aplicativo<<span>/title></span><br> <link rel="<span">"stylesheet" href=<span>"/static/css/style.css"</span> /><br> <<span>/Head></span><br> <cabe></cabe><br> {filhos}<br> <rodap></rodap><br> <<span>/div></span><br>)<br><span>exportar</span> <span>padrão</span> Layout<br> < p>Este componente importa os componentes Header e Footer e <span>aceita filhos como adereços</span>. Ele renderiza os <strong>filhos</strong> entre os componentes Cabeçalho e Rodapé. Ao quebrar uma página com este layout, o cabeçalho e o rodapé serão exibidos na parte superior e inferior.<div>
<a href="https://greatfon.com">instagram viewer</a>
</div>
<h2 id="using-the-layout-component"> Usando o Componente de layout </h2>
<p>Para usar o componente de layout, importe-o para um componente de página e use-o conforme mostrado abaixo.</p> <pre> <code><span>importar</span> Layout <span>de</span> <span>'../components/Layout'</span><br><span>const</span> Página = <span><span>()</span> =></span> (<br> <layout><br> <h1>Início<<span>/h1></span><br> <<span>/Layout></span><br>)<br><span>exportar</span> <span> Página padrão</span><br>
</h1></layout></code> </pre>
<p>Aplicará o layout para esta página. Você pode repetir esse processo para todas as páginas nas quais deseja aplicar o layout.</p>
<p>Para usar o layout em todas as páginas dos aplicativos de uma só vez, importe o componente de layout no arquivo <strong>/page/_app.js</strong> e use-o da seguinte forma.</p> <pre> <code><span>importar</span> Layout <span>de extensão> <span>"../components/layout"</span>;<br><span><span>função</span> <span>MeuAplicativo</span>(<span>{ Componente, pageProps } span>) </span>{ <br> <span>retorno</span> ( <br> <layout> <br> <component></component> <br> <<span>/Layout> </span><br> ) ;<br>}</layout></span></span></code> </pre>
<p>Os exemplos mostrados até agora use as pastas de 12 páginas do Next.js. No Next.js 13, você cria o layout na pasta do aplicativo (até o momento, está na versão beta).</p>
<h2 id="creating-a-custom-layout-in-the-app-folder"> Criando um layout personalizado na pasta App </h2>
<p>A <span>pasta app em Next.js 13 </span>requer que você crie um layout raiz em sua base. Este é o layout que o Next.js aplicará a todas as páginas do seu aplicativo.</p>
<p>Para demonstrar, crie um arquivo chamado <strong>layout.jsx</strong> e adicione o seguinte código. p> </p>
<pre> <code><span>exportar</span> <span>padrão</span> <span><span>função</span> <span>RootLayout</span>(<span>{ filhos } span>) </span>{<br> <span>retorno</span> (<br> "en"</span>><br> {children}<<span>/body></span><br> <<span>/html></span>< br/> );<br>}<br></code> </pre>
<p>O componente de layout raiz aceita e renderiza o <strong>crianças</strong>. Abaixo estão algumas das coisas que você deve saber sobre um layout raiz:</p>
<ul> <li> Você deve incluí-lo na pasta do aplicativo. </li> <li> Substitui <strong>_app.js</strong> e <strong>_document.js</strong> na pasta da página de Next.js 12. </li> <li> Você deve incluir explicitamente o HTML e a tag body. </li> <li> É um componente do servidor por padrão. </li> </ul>
<p>Como mencionado, o layout raiz se aplica a todas as páginas, então como criar layouts personalizados para diferentes segmentos de rota?</p>
<p>Na pasta do aplicativo, você pode definir uma rota criando pastas para cada rota segmento. Por exemplo, criar uma pasta chamada <strong>artigos</strong> mapeia para o caminho de URL <strong>app/articles</strong>. Para adicionar mais segmentos de rota, crie uma subpasta dentro da pasta de rota principal. Por exemplo, adicionar uma pasta chamada <strong>tendências</strong> dentro da pasta <strong>artigos</strong> mapeia para o caminho do URL <strong>app/articles/trending</strong>.</p>
<p>Ao adicionar um componente <strong>layout.jsx</strong> a uma pasta de rota, ele será aplicado a todas as páginas dentro dessa segmento de rota e suas subpastas. Por exemplo, adicionar um componente de layout à pasta <strong>artigos</strong> será aplicado a todas as páginas na rota de artigos, incluindo aquelas na subpasta <strong>tendências</strong>. Se você também adicionar um componente de layout na pasta <strong>tendências</strong>, o layout na pasta de artigos será aninhado dentro dela.</p>
<h2 id="advantages-of-using-layouts"> Vantagens de usar layouts </h2>
<p>Next.js permite criar componentes de layout que você pode reutilizar em diferentes Páginas. Isso permite que você tenha uma aparência consistente em seu site sem duplicar o código em várias páginas. Além disso, os layouts ajudam você a implementar alterações rapidamente porque não precisa fazer alterações em cada página.</p>