Next.js Discord

Discord Forum

Nesting issue in App layout.tsx

Answered
West African Lion posted this in #help-forum
Open in Discord
West African LionOP
I am conditionally rendering a Navbar through the RootLayout component in layout.tsx:

(Image 1)

And I am wrapping pages I want show the the Navbar with the RootLayout like so:

(Image 2)

The problem I am having is I am receiving an error in browser console:

app-index.js:34 Warning: validateDOMNesting(...): <html> cannot appear as a child of <body>.
at html
at RootLayout (webpack-internal:///(app-pages-browser)/./src/app/layout.tsx:17:11)
at HomePage (webpack-internal:///(app-pages-browser)/./src/app/home/page.tsx:14:74)
at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/compo....

I asked Copilot for clarification and it informed me:

The issue is that you're using <html> and <body> tags in your RootLayout component. In a Next.js application, you should not include these tags in your components. Next.js automatically includes these tags for you. Your components should only return the content that goes inside the <body> tag.

By default, Next.js RootLayout component renders <html> and <body> elements. When I removed these, as copilot suggested,
I receive this error in the browsers console:

navigation.js:125 Uncaught Error: invariant expected app router to be mounted
at useRouter (navigation.js:125:15)
at HotReload (hot-reloader-client.js:355:46)
at renderWithHooks (react-dom.development.js:11009:18)
...

Is there an issue with how I am using conditional rendering to show the Navbar component?
Answered by Northeast Congo Lion
inside homepage, dont call <RootLayout>
View full answer

5 Replies

@West African Lion I am conditionally rendering a Navbar through the RootLayout component in layout.tsx: (Image 1) And I am wrapping pages I want show the the Navbar with the RootLayout like so: (Image 2) The problem I am having is I am receiving an error in browser console: app-index.js:34 Warning: validateDOMNesting(...): <html> cannot appear as a child of <body>. at html at RootLayout (webpack-internal:///(app-pages-browser)/./src/app/layout.tsx:17:11) at HomePage (webpack-internal:///(app-pages-browser)/./src/app/home/page.tsx:14:74) at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/compo.... I asked Copilot for clarification and it informed me: The issue is that you're using <html> and <body> tags in your RootLayout component. In a Next.js application, you should not include these tags in your components. Next.js automatically includes these tags for you. Your components should only return the content that goes inside the <body> tag. By default, Next.js RootLayout component renders <html> and <body> elements. When I removed these, as copilot suggested, I receive this error in the browsers console: navigation.js:125 Uncaught Error: invariant expected app router to be mounted at useRouter (navigation.js:125:15) at HotReload (hot-reloader-client.js:355:46) at renderWithHooks (react-dom.development.js:11009:18) ... Is there an issue with how I am using conditional rendering to show the Navbar component?
Northeast Congo Lion
inside homepage, dont call <RootLayout>
Answer
Northeast Congo Lion
layout.js is mounted, already

call page.js like so:

src/page.js
export default function HomePage() {

  return (
    <CustomLayout navbar={true}>
        ...components go here etc
    <Customlayout/>
  )
}
create a component called custom layout which handles like:

{navbar && <Navbar />}
{children}
Afaik you can't rlly pass props back up to layout.js from page.js I already spent some time on that issue lol
West African LionOP
@Northeast Congo Lion Thanks for the help... works now! Such a simple concept yet it went over my head, before you helped out. Its a mix of my noobness and being used to Next 13 and how layout is handled in that version.