#Is it possible to remove the parent layout?

1 messages · Page 1 of 1 (latest)

fierce bear
# 
app/
  product/
    [id]/
      page.tsx
    page.tsx

  store/
    page.tsx

  layout.tsx

I want to remove the layout in product/[id]/page.tsx
Is it possible?
what is the best way?

weak nymphBOT
#

Hi @fierce bear. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Yes, it is possible to remove the parent layout in Next.js. You can achieve this by moving the route to a new group. Each group gets a clean slate, meaning they don't inherit the parent layout.

In your case, you can create a new group for the product/[id] route and define its layout there. If you don't define a layout, it means there's no layout for that specific route.

Here's an example of how you can structure your routes:

/app/ # no layout
/app/(root)/layout.tsx      # your most common global layout
/app/(root)/product/page.tsx  # pages with the common layout
/app/(product_id)/layout.tsx # some unique layout 
/app/(product_id)/product/[id]/page.tsx # a page with a unique layout

In this structure, /app/(product_id)/product/[id]/page.tsx will not inherit the layout from /app/layout.tsx because it's in a different group (product_id).

Please note that this is a workaround and might not be the best solution for all use cases.

For more information, you can refer to the Next.js documentation on Route Groups (https://nextjs.org/docs/app/building-your-application/routing/route-groups).

Source: Github Issue (closed): No way to skip root layout > Comments (https://github.com/vercel/next.js/issues/50591)

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: