Next.js Discord

Discord Forum

[Newbie] Next.JS Layout Issue

Answered
Common carp posted this in #help-forum
Open in Discord
Common carpOP
Hello,

I previously used Next.js 13.8 where I had the liberty to structure my components like this without any hitches:
export default function RootLayout() {
  return (
    <>
      <NavBar />
      <Section />
    </>
  );
}

However, with the updated layout in the new version, it seems the format has changed to:
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <html lang="en">
        <body>{children}</body>
      </html>
    </>
  );
}

When I try to place <NavBar /> above the <body> element, it still renders below it. And if I omit the html tag, reverting to my previous format:
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <NavBar />
      <body>{children}</body>
    </>
  );
}

The elements don't render at all, and the page doesn't refresh as expected. The documentation doesn’t seem to highlight the significance of the html tag. Could someone clarify if there's a new requirement or if I'm missing something here? Thank you!
Answered by Common carp
So if I want to add Section to a particular page, I'd do it through page.tsx?
View full answer

41 Replies

American Chinchilla
try putting it in the body tag
Common carpOP
Hmmm yes, now I see it.
So what's the page.tsx for?
West African Lion
<html lang="en"> <body><Navbar />{children}</body> </html>
Common carpOP
Yes it worked
@Common carp So what's the page.tsx for?
American Chinchilla
that's the page itself, basically {children}
Common carpOP
Right right, but now in the sense that page.tsx is the body aspect of what was there before, should I just export page.tsx as a Home component?
American Chinchilla
every page you create will have the layout applied, where the page html is where children is
Common carpOP
And I can remove body and children altogether?
American Chinchilla
you'll want to keep both in the layout
@American Chinchilla every page you create will have the layout applied, where the page html is where children is
Common carpOP
This is my current structure. The way I'm used is to separate each "section" of my website into components
Kinda like:
export default function RootLayout() {
  return (
    <>
      <NavBar />
      <Section />
<Section />
<Section />
<Section />
<Footer />
    </>
  );
}
American Chinchilla
RootLayout is basically stuff that will get applied to every page you create
Common carpOP
Thanks for helping out btw, you've really cleared up lots of my confusion
American Chinchilla
so you generally want your Navbar, Footer, and that kind of stuff there
the "page.tsx" files you create are going to be the dynamic stuff
Common carpOP
Ohhh I see. So that's for the layout of each page (like you stated).
Common carpOP
So if I want to add Section to a particular page, I'd do it through page.tsx?
Answer
American Chinchilla
Yep! So it's just like your constants across all pages.
Common carpOP
Gotcha gotcha
American Chinchilla
And yes, sections should usually go in page.tsx
There's always exceptions 😂
Common carpOP
Cool! Many thanks
American Chinchilla
If my biology coursework has taught me anything...
Common carpOP
Yea haha I'm not doing anything crazy just a simple one page ecommerce (like for a 1 product mead bottle lol)
American Chinchilla
So yes, I think you could in theory put sections in the layout. If you wanted to create additional pages later on though you'd have to migrate the code anyway. Also just best practice imo
Common carpOP
According to the docs, additional pages means just creating a folder called pages, and adding stuff there right?
OH
It's associted to the file tsx
Which then becomes a slug
@Common carp According to the docs, additional pages means just creating a folder called pages, and adding stuff there right?
American Chinchilla
If I wanted to create a page at /about, I'd
1. Create folder at app/about
2. Create page.tsx in that folder
Common carpOP
I see I see
Damn thanks haha I learned a lot
I'm used to vite so this is a real kicker. Thanks
American Chinchilla
that feature got me hooked on next haha
i love it
Common carpOP
Yea, it already sounds like I'll love it
American Chinchilla
i went from create-react-app and react-router to that and my mind was blown
Common carpOP
Well said. So much more intuitive I think
Anyway, thanks for the help. I'll pass along this knowledge to others.
American Chinchilla
Ofc!