Pesquisa de site

Como criar um layout personalizado em Next.JS

Evite a repetição de código usando layouts personalizados em Next.js.

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

Criando um componente de layout personalizado em Next.JS

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

import Head from 'next/head'
import Header from './Header.jsx'
import Footer from './Footer.jsx'
const Layout = (children) => (
  <div>
    <Head>
      <title>My App</title>
      <link rel="stylesheet" href="/static/css/style.css" />
    </Head>
    <Header />
      {children}
 <Footer />
  </div>
)
export default Layout

Este componente importa os componentes Header e Footer e aceita filhos como adereços. Ele renderiza os filhos entre os componentes Cabeçalho e Rodapé. Quando você quebra uma página com este Layout, o Cabeçalho e o Rodapé serão exibidos na parte superior e inferior.

Usando o componente Layout

Para usar o componente de layout, importe-o para um componente de página e use-o conforme mostrado abaixo.

import Layout from '../components/Layout'
const Page = () => (
  <Layout>
    <h1>Home</h1>
  </Layout>
)
export default Page

Ele aplicará o layout a esta página. Você pode repetir esse processo para todas as páginas nas quais deseja aplicar o layout.

Para usar o layout em todas as páginas dos aplicativos de uma vez, importe o componente de layout para o arquivo /page/_app.js e use-o da seguinte maneira.

import Layout from "../components/layout";
function MyApp({ Component, pageProps }) { 
   return ( 
       <Layout> 
           <Component {...pageProps} /> 
       </Layout> 
    );
}

Os exemplos mostrados até agora usam as pastas de 12 páginas Next.js. No Next.js 13, você cria o layout na pasta do aplicativo (no momento da escrita, está em beta).

Criando um layout personalizado na pasta do aplicativo

A pasta app em Next.js 13 requer que você crie um layout raiz em sua base. Este é o layout que Next.js aplicará a todas as páginas da sua aplicação.

Para demonstrar, crie um arquivo chamado layout.jsx e adicione o código a seguir.

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

O componente de layout raiz aceita e renderiza os filhos. Abaixo estão algumas coisas que você deve saber sobre um layout raiz:

  • Você deve incluí-lo na pasta do aplicativo.
  • Ele substitui _app.js e _document.js na pasta de páginas do Next.js 12.
  • Você deve incluir explicitamente o HTML e a tag body.
  • É um componente de servidor por padrão.

Conforme mencionado, o layout raiz se aplica a todas as páginas. Então, como criar layouts personalizados para diferentes segmentos de rota?

Na pasta do seu aplicativo, você pode definir uma rota criando pastas para cada segmento da rota. Por exemplo, criar uma pasta chamada artigos mapeia para o caminho da URL app/artigos. Para adicionar mais segmentos de rota, crie uma subpasta dentro da pasta principal da rota. Por exemplo, adicionar uma pasta chamada tendências dentro da pasta artigos mapeia para o caminho da URL app/articles/trending.

Quando você adiciona um componente layout.jsx a uma pasta de rota, ele será aplicado a todas as páginas dentro desse segmento de rota e suas subpastas. Por exemplo, adicionar um componente de layout à pasta artigos será aplicado a todas as páginas na rota de artigos, incluindo aquelas na subpasta tendências. Se você também adicionar um componente de layout na pasta tendências, o layout na pasta de artigos será aninhado dentro dele.

Vantagens de usar layouts

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 a implementar alterações rapidamente porque você não precisa fazer alterações em cada página.

Artigos relacionados: