typescript - Cómo excluir el diseño de la visualización en páginas específicas en Next.js 13 App Router

Estoy trabajando en un proyecto personal usando Next.js 13 con el enrutador de aplicaciones y me he encontrado con un problema. En mi proyecto, hay un componente de encabezado que se inyecta en el archivo layout.tsx en el directorio raíz. Sin embargo, también tengo una página de panel que debería tener su propio encabezado, y quiero evitar que el componente de encabezado en layout.tsx se muestre en la página del panel. Estoy familiarizado con lograr esto usando el enrutador de páginas, que se ve así:

// _app.tsx

import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

function commonLayout(page) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || commonLayout

  return getLayout(<Component {...pageProps} />)
}

Sin embargo, soy nuevo en el enrutador de la aplicación y su configuración, que parece diferente de lo que estoy acostumbrado en el enrutador de páginas. ¿Cómo puedo lograr un efecto similar usando la configuración del enrutador de la aplicación?

He buscado en internet si hay algún artículo que explique cómo lograr esto, incluida la documentación de Next.js, pero no pude encontrar ninguna solución adecuada.

Respuesta #1

Puedes usar múltiples archivos de diseño en combinación con grupos de rutas. Esto te permite organizar tus segmentos de rutas y archivos del proyecto en grupos lógicos sin afectar la estructura de la ruta URL. Los grupos de rutas son especialmente útiles para:

• Organizar rutas en grupos, por ejemplo, por sección del sitio, intención o equipo.
• Habilitar diseños anidados en el mismo nivel de segmento de ruta:
• Crear múltiples diseños anidados en el mismo segmento, incluidos múltiples diseños raíz
• Agregar un diseño a un subconjunto de rutas en un segmento común