RootLayout confusion

Answered

Whimbrel posted this in #help-forum

WhimbrelOP

2023-06-15T16:20:02.000Z

This code prints the Footer component twice.
Can someone explain why?

import {theme} from "../styles/styles.css"                            import {Footer} from './components/interload'                         export default function RootLayout({ children }) {                      return (
    <html lang="en" className="theme">                                    <head>
    <title>title name</title>
    </head>
      <body>
      {children}
      <Footer />
      </body>
    </html>
  )
}

Answered by alfon

You dont need to call rootlayout again here

View full answer

12 Replies

@Whimbrel This code prints the Footer component twice. Can someone explain why? import {theme} from "../styles/styles.css" import {Footer} from './components/interload' export default function RootLayout({ children }) { return ( <html lang="en" className="theme"> <head> <title>title name</title> </head> <body> {children} <Footer /> </body> </html> ) }

alfon

2023-06-15T16:35:32.000Z

Where is this file located

What is the URL you accesed

What is your route structure around the RootLayout

WhimbrelOP

2023-06-15T17:56:55.000Z

This is the page.js

import {
PopoverDemo,                       MyBio,
Hobby,
Navbar,                            Footer,
} from './components/interload';
import RootLayout from './layout'

export default function Page() {  return (
  <RootLayout>
  <Navbar />
  <PopoverDemo />
  <MyBio />
  <Hobby />
  </RootLayout>
  )
}

@alfon What is the URL you accesed

WhimbrelOP

2023-06-15T17:59:24.000Z

The home page

This is footer.js

export function Footer(){
return (
<>
<footer>
    <p>&copy; 2023 Your name. All rights reserved.</p>
</footer>
</>
)
}

WhimbrelOP

2023-06-15T18:35:27.000Z

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <footer> in <body>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
footer
Footer
body
html

This is the error I am getting

@Whimbrel This is the page.js import { PopoverDemo, MyBio, Hobby, Navbar, Footer, } from './components/interload'; import RootLayout from './layout' export default function Page() { return ( <RootLayout> <Navbar /> <PopoverDemo /> <MyBio /> <Hobby /> </RootLayout> ) }

alfon

2023-06-16T01:25:53.000Z

You dont need to call rootlayout again here

Answer

alfon

2023-06-16T01:26:05.000Z

Its already nested for you

WhimbrelOP

2023-06-16T03:21:22.000Z

Hey thanks @alfon for helping out