Executando verificação de segurança...
1

Sistema de layout do Nextjs 13

Duvida

Estou desenvolvendo um blog, para reforçar meus estudos. Por hora estou usando o tabnews para popular o blog, mas posteriormente irei escrever conteudos la e trazer para o tabnews pela otima API disponiblizada.

Pois bem, minha duvida esta nessa nova versão do Next, defini um layout base e alguns leyouts subsequentes, conforme a documentação, porem, estou em uma parte do codigo, em uma devido caminho: baseURL/{user}/{slug}.

na baseURL defini um layout e uma template, pois tem informaçoes que precisam ser recarregados e outros não. Na rota dinamica {user}, defini outro layout que herda o layout principal e adcionar mais algumas particularidades. Na rota dinamica {slug}, preciso usar apenas o layout root, não posso usar nada do layout {user}, não encontrei nada na documentação...

Alguem consegue me ajudar? kk

Carregando publicação patrocinada...
1

Olá! Com relação à sua dúvida sobre o uso de layouts no Next.js 13, é possível definir layouts específicos para cada rota dinâmica. Para isso, você pode utilizar o componente getLayout no seu arquivo _app.js, que é responsável por renderizar todos os componentes da aplicação.

Por exemplo, para a rota dinâmica /{user}/{slug}, você pode definir o seguinte código:

import DefaultLayout from '../layouts/default';
import UserLayout from '../layouts/user';

function MyApp({ Component, pageProps }) {
  const getLayout = Component.getLayout || ((page) => <DefaultLayout children={page} />);
  
  return getLayout(
    <UserLayout>
      <Component {...pageProps} />
    </UserLayout>
  );
}

Neste exemplo, o componente MyApp é responsável por definir o layout da aplicação. O layout padrão é o DefaultLayout, que é utilizado para todas as rotas que não possuem um layout específico definido. Já para a rota dinâmica /{user}/{slug}, é utilizado o UserLayout, que é herdado do layout principal.

Para a rota dinâmica {slug}, basta utilizar o layout padrão, definido na prop getLayout do componente MyApp.

1

Obrigado thiago, mas essa solução não vai me ajudar.. Estou tentanto seguir a doc da ultima versão do next, com a pasta experimental app, onde nem existe mais esse arquivo _app.js.

Consegui seguir por outro caminho usando rotas paralelas, mas para cada solução encontro mais 10 problemas kkkk

mesmo assim, obrigado pela ajuda :)