Next.js Discord

Discord Forum

What does {children} mean? its a code from one of next js tutorials.

Unanswered
Sedge Wren posted this in #help-forum
Open in Discord
Sedge WrenOP
const RootLayout = ({children}) => {
  return (
    <html lang="en">
    <body>
        <div className='main'>
        </div>
        <main className='app'>
        <Nav/>
        {children}
        </main>
    </body>
    </html>
  )
}

export default RootLayout;

1 Reply

That's a basic React feature. You can nest components inside of each other.
Example:
<ComponentA>
  <ComponentB />
</ComponentA>

In this example, ComponentB will get mounted in place of the {children} of ComponentA.

In your case, RootLayout, all the content of your pages will get mounted in that place.