CODEWITHSUNDEEP
typescriptnext.jsnext.js13app-router
Abubalo
Abubalo

Reputation: 37

How to Exclude Layout from Display on Specific Pages in Next.js 13 App Router

I'm working on a personal project using Next.js 13 app router and I've encountered an issue. In my project, there's a header component that's injected into the layout.tsx file in the root directory. However, I also have a dashboard page that should have its own header, and I want to prevent the header component in layout.tsx from showing on the dashboard page. I'm familiar with achieving this using the page router, which looks like this:

// _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} />)
}

However, I'm new to the app router and its configuration, which seems different from what I'm used to in the page router. How can I achieve a similar effect using the app router configuration?

I have searced the internet whether there is an article that explained how to achieve this, including Next.js documentation but could not find any suitable solution.

Upvotes: 1

Views: 4808

Answers (1)

Fabio Nettis
Fabio Nettis

Reputation: 2853

You can use multiple layout files in combination with route groups. This allows you to organize your route segments and project files into logical groups without affecting the URL path structure. Route groups are especially useful for:

Upvotes: 3

Related Questions