[Newbie] Next.JS Layout Issue
Answered
Common carp posted this in #help-forum
Common carpOP
Hello,
I previously used Next.js 13.8 where I had the liberty to structure my components like this without any hitches:
However, with the updated layout in the new version, it seems the format has changed to:
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:
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!
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?
41 Replies
drewb
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
drewb
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?
drewb
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?
drewb
you'll want to keep both in the layout
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 />
</>
);
}drewb
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
drewb
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
drewb
Yep! So it's just like your constants across all pages.
Common carpOP
Gotcha gotcha
drewb
And yes, sections should usually go in page.tsx
There's always exceptions 😂
Common carpOP
Cool! Many thanks
drewb
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)
drewb
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
drewb
If I wanted to create a page at /about, I'd
1. Create folder at app/about
2. Create page.tsx in that folder
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
drewb
that feature got me hooked on next haha
i love it
Common carpOP
Yea, it already sounds like I'll love it
drewb
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.
drewb
Ofc!