Persistir Componentes no Layout

Oi João Vitor, tudo bem?

Além da abordagem que você aprendeu no curso, existe uma outra prática bastante comum para persistir componentes em um layout. Essa prática envolve o uso de um componente de layout mais abrangente que envolve todos os outros componentes da página, incluindo o cabeçalho (Header) e o rodapé (Footer).

Esse componente de layout geralmente é chamado de Layout Component e é responsável por manter a estrutura da página, enquanto os outros componentes da página são renderizados dentro dele. Isso permite que o cabeçalho e o rodapé sejam mantidos em todas as páginas sem precisar serem repetidos manualmente em cada uma.

Para ilustrar, aqui está um exemplo de como um Layout Component pode ser implementado em Next.js:

import Header from '../components/Header';
import Footer from '../components/Footer';

const Layout = ({ children }) => {
  return (
    <div>
      <Header />
      <main>{children}</main>
      <Footer />
    </div>
  );
};

export default Layout;

Nesse exemplo, o Layout Component envolve os componentes Header e Footer e também renderiza o conteúdo da página dentro do componente main. Ao usar o componente Layout, o cabeçalho e o rodapé são mantidos consistentes em todas as páginas do site.

Para usar o Layout Component em suas páginas, basta importá-lo e envolver o conteúdo da página em um componente de conteúdo, conforme mostrado abaixo:

import Layout from '../components/Layout';

const HomePage = () => {
  return (
    <Layout>
      <h1>Minha Página Inicial</h1>
      <p>Bem-vindo à minha página inicial!</p>
    </Layout>
  );
};

export default HomePage;

Espero que esta alternativa tenha sido útil para você. Lembre-se de que ambas as abordagens têm suas vantagens e desvantagens, e a escolha da abordagem certa dependerá das necessidades do seu projeto.

Um abraço e bons estudos.