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

Question

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.

score 1 · Accepted Answer · answered Aug 08 '23 at 12:03

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:

Organizing routes into groups e.g. by site section, intent, or team.
Enabling nested layouts in the same route segment level:
Creating multiple nested layouts in the same segment, including multiple root layouts
Adding a layout to a subset of routes in a common segment

Thank you, Fabio. This fixed my problem. – Abubalo Aug 08 '23 at 15:14 — Abubalo, Aug 08 '23 at 15:14

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

1 Answers1