I am currently working on a personal project that involves using the Next.js 13 app router, and I have encountered a dilemma. Within my project, there is a header component injected into the layout.tsx file located in the root directory. However, I also have a dashboard page that requires its own unique header, separate from the one in layout.tsx. My goal is to prevent the header component in layout.tsx from displaying on the dashboard page. While I am familiar with achieving this task using the page router, I am unsure how to do so with the app router configuration.
// _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} />)
}
Although I have searched extensively online for assistance, including Next.js documentation, I have not been able to find a suitable solution to my predicament.