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.