Next.js Discord

Discord Forum

I'm learning: I just need an explanation

Answered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
could someone tell me what does this function do
and why is it structed like that ? 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

why do we need ":" ? why there are so many "{}" ?

i'm used to function look like this 
function funName()
{
  // some logic
}

I'm not used to that form of function I mentioned earlier, what does it means?
Answered by B33fb0n3
this was a snippet of ✨ the docs ✨

You can find the docs here: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required
View full answer

6 Replies

@Asian black bear could someone tell me what does this function do and why is it structed like that ? js export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> </html> ); } why do we need ":" ? why there are so many "{}" ? i'm used to function look like this js function funName() { // some logic } I'm not used to that form of function I mentioned earlier, what does it means?
B33fb0n3
all the : are type declarations. It tells your IDE which type this specific variable is.

This RootLayout itself gives your page a reusable structure. From here you build your tree with specific components like "Navbar" or "Footer" or ...

If you are not familiar with typescript, you want to use the javascript version of layouts:
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {/* Layout UI */}
        <main>{children}</main>
      </body>
    </html>
  )
}
@Asian black bear thank you, yea it looks a lot simpler without the ":" part 🙂
B33fb0n3
yea, you can switch between both inside the docs. You want to look for javascript code. Later you can upgrade your javascript to typescript if needed. It helps you to solve errors during developement instead of during runtime
Asian black bearOP
which IDE is that ? im using vs2019
@Asian black bear which IDE is that ? im using vs2019
B33fb0n3
this was a snippet of ✨ the docs ✨

You can find the docs here: https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required
Answer
B33fb0n3