Route Groups in NextJs throws error, doesn't opt out of app layout.tsx

Question

afaik, the layout.tsx in the app directory is the root layout and in order to opt out of this layout structure, one can use Route Groups source

wherein (directory_name) containing layout.tsx will be followed for any page.tsx inside this directory

layout.tsx (app directory)

import Link from 'next/link' import './globals.css' export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body> <nav className='navbar'> <h1><Link href={'/'}>Home</Link></h1> <h1><Link href={'/wikirocket'}>WikiRocket</Link></h1> <h3><Link href={'/about'}>About</Link></h3> <h3><Link href={'/users'}>Users</Link></h3> </nav> {children} </body> </html> ) }

layout.tsx (inside (wikirocket) directory)

import Navbar from './wikirocket/components/Navbar' export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({children}: { children: React.ReactNode }) { return ( <html lang="en"> <body className='bg-slate-800 text-cyan-200'> <Navbar /> {children} </body> </html> ) }

thus when i run http://localhost:3000/wikirocket
i should not see the navbar displayed through the app layout but i still see it displayed for a brief second and immediately followed by the following errors:

removing the html tag from the wikirocket directory layout.tsx only gets rid of one error which specifies the problem

i just dont want to see the navbar from the app layout.tsx and let the layout.tsx inside (wikirocket) directory override the prev one

Like the error says It is an error to render more than one body component at a time it looks like the layout from the wikirocket is getting rendered inside the layout of the app. See Next.js Nesting Layouts for more information. — RubenSmn
– RubenSmn, Commented Apr 29, 2023 at 13:19

Hammad Qurashi · Accepted Answer · 2023-04-29 14:11:24Z

The layout of nextjs works in a way that the other layouts occurs as a child of rootlayout, so the html and body tags cannot appear as a child of html or body. So first, you need to remove the html and body tags from wikirocket directory layout.tsx and just wrap like that

import Navbar from './wikirocket/components/Navbar' export const metadata = { title: 'Create Next App', description: 'Generated by create next app', } export default function RootLayout({children}: { children: React.ReactNode }) { return ( <section> <Navbar /> {children} </section> ) }

and it is not possible that the layout of any directory overrides the rootlayout.

Collectives™ on Stack Overflow

Route Groups in NextJs throws error, doesn't opt out of app layout.tsx

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related