Multiple layouts | Next.js | Page 1

vital trenchBOT Mar 7, 2024, 8:01 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

dusky oracle Mar 7, 2024, 8:01 PM

#

@hasty pier

hasty pier Mar 7, 2024, 8:02 PM

#

take a look at your folder structure and build your route group like this:

#

the root layout is not named "root-layout.jsx". It's just a normal layout. It just represents the root layout

dusky oracle Mar 7, 2024, 8:04 PM

#

i understand that, so i end up with 2 layout.jsx?

hasty pier Mar 7, 2024, 8:05 PM

#

yea, one for your (pages) group (for the 3 routes) with the footer and your root layout if you need a root layout

#

or having multiple root layout is also possible

dusky oracle Mar 7, 2024, 8:07 PM

#

can i just copy it, and paste it in, the pages?

hasty pier Mar 7, 2024, 8:08 PM

#

yea

dusky oracle Mar 7, 2024, 8:10 PM

#

cool

hasty pier Mar 7, 2024, 8:10 PM

#

worked?

dusky oracle Mar 7, 2024, 8:10 PM

#

but now my root page, broken

hasty pier Mar 7, 2024, 8:10 PM

#

why?

dusky oracle Mar 7, 2024, 8:11 PM

#

do i need to remove something from this new layout file?

hasty pier Mar 7, 2024, 8:11 PM

#

you know what you are doing? 🤔

dusky oracle Mar 7, 2024, 8:11 PM

#

hasty pier you know what you are doing? 🤔

ehmm, not sure anymore

#

i see it says "RootLayout"

hasty pier Mar 7, 2024, 8:12 PM

#

do you know what the layout.jsx does for your app?

dusky oracle Mar 7, 2024, 8:12 PM

#

yes

hasty pier Mar 7, 2024, 8:12 PM

#

u sure?

dusky oracle Mar 7, 2024, 8:12 PM

#

it gives the same layout for all pages

#

so if i add a footer component, the footer will be shown on all pages

hasty pier Mar 7, 2024, 8:13 PM

#

you are right. And do you know whats the difference between the root layout and a normal layout?

dusky oracle Mar 7, 2024, 8:13 PM

#

hasty pier you are right. And do you know whats the difference between the root layout and ...

thats where i get lost

#

root is for the whole app

#

and normal layout, is only for where i place it?

hasty pier Mar 7, 2024, 8:15 PM

#

a normal layout is exactly what you just said.

The root layout is defined at the top level of the app directory and applies to all routes. This layout is required and must contain html and body tags, allowing you to modify the initial HTML returned from the server.

So in conclusion:
normal layout = just layout like you said.
root layout = layout with html and body tag

#

A root layout is required, because your page needs the html and body to work. Makes sense, right?

dusky oracle Mar 7, 2024, 8:16 PM

#

export default function RootLayout({ children }) { return ( <html lang="en"> <body className={ubuntu.className}> {children} <Footer /> </body> </html> ); }

#

but what do i need to remove then?

hasty pier Mar 7, 2024, 8:18 PM

#

so which layout will be loaded, when you navigate to / and which one will be loaded, when you navigate to (pages)/idontremember?

dusky oracle Mar 7, 2024, 8:18 PM

#

/ = root layout
(pages) = normal layout

hasty pier Mar 7, 2024, 8:19 PM

#

can I see your folder structure again, please?

dusky oracle Mar 7, 2024, 8:19 PM

#

hasty pier Mar 7, 2024, 8:20 PM

#

how does the layout with the red dot look like?

#

and how the one with the yellow one?

dusky oracle Mar 7, 2024, 8:21 PM

#

they look the exact same

#

and thats the issue

#

this is the Root layout

hasty pier Mar 7, 2024, 8:22 PM

#

you found the issue. Congratulations! Now, lets fix this. When you navigating to (pages)/activities/ for example, which layout*(s)* will be loaded?

#

it's the layout with the red dot and the one with the yellow dot.

dusky oracle Mar 7, 2024, 8:23 PM

#

this is the root layout^

hasty pier Mar 7, 2024, 8:23 PM

#

and there is the problem. two htmls and two bodys makes no sense..

hasty pier Mar 7, 2024, 8:23 PM

#

dusky oracle this is the root layout^

the one with the red dot?

dusky oracle Mar 7, 2024, 8:23 PM

#

yes this is the red dot

hasty pier Mar 7, 2024, 8:24 PM

#

When you navigating to (pages)/activities/ for example, which layout(s) will be loaded?

it's the layout with the red dot and the one with the yellow dot.

and there is the problem. two htmls and two bodys makes no sense..

#

Got it?

dusky oracle Mar 7, 2024, 8:26 PM

#

no

#

am lost

#

my root layout, is correct

#

the issue comes from my normal layout

#

the issue is here

export default function RootLayout({ children }) { return ( <html lang="en"> <body className={ubuntu.className}> {children} <Footer /> </body> </html> ); }

hasty pier Mar 7, 2024, 8:27 PM

#

yes! That's what I am trying you to say

#

take a look at this:
#1215388872314191882 message
You can see the last dot:

two htmls and two bodys makes no sense..

#

The root layout loads the html and body tag and the "normal layout" with the yellow dot tries to load html and body again and that makes no sense

dusky oracle Mar 7, 2024, 8:28 PM

#

oh okay

#

i think i got it

hasty pier Mar 7, 2024, 8:29 PM

#

you sure?

dusky oracle Mar 7, 2024, 8:30 PM

#

#

is this correct?

hasty pier Mar 7, 2024, 8:30 PM

#

So you have now 3 options:

Remove the html and body stuff from the one with the yellow dot (and add your footer there)
Define multiple root layouts See here
I don't know any 3 third option.. lol

dusky oracle Mar 7, 2024, 8:31 PM

#

so this is correct?

hasty pier Mar 7, 2024, 8:31 PM

#

does it work? I don't think so

#

Please.. I am trying to help you.. 🙂

dusky oracle Mar 7, 2024, 8:32 PM

#

you could give me the answer

hasty pier Mar 7, 2024, 8:32 PM

#

alright: it's wrong.

dusky oracle Mar 7, 2024, 8:32 PM

#

dusky oracle

this seems to be right?

#

but the only thing is the "RootLayout"

#

which makes me thinking is wrong

#

hasty pier Mar 7, 2024, 8:33 PM

#

yea, and that's the problem. I guess you just modified the layout with the red dot (root layout) so your normal pages at / won't have a html and body tag and you pages won't be available.

dusky oracle Mar 7, 2024, 8:33 PM

#

is this correct?>

dusky oracle Mar 7, 2024, 8:34 PM

#

hasty pier yea, and that's the problem. I guess you just modified the layout with the red d...

i havent touched my red dot root layout

hasty pier Mar 7, 2024, 8:34 PM

#

ah ok, then nvm

dusky oracle Mar 7, 2024, 8:34 PM

#

this is the yellow dot normal layout

dusky oracle Mar 7, 2024, 8:34 PM

#

dusky oracle

#

does this look correct to you?

hasty pier Mar 7, 2024, 8:35 PM

#

it does

dusky oracle Mar 7, 2024, 8:35 PM

#

it seems to be working

hasty pier Mar 7, 2024, 8:35 PM

#

u sure?

dusky oracle Mar 7, 2024, 8:36 PM

#

oh no

#

my root page, looks like this

#

it went from this

hasty pier Mar 7, 2024, 8:37 PM

#

show your red dot and your yellow dot

#

are both loaded when navigating to /(pages)/somepage/? And is the root layout loaded when navigating to /?

dusky oracle Mar 7, 2024, 8:38 PM

#

i have only changed the from line 24 and down

hasty pier Mar 7, 2024, 8:40 PM

#

looks good for me

dusky oracle Mar 7, 2024, 8:40 PM

#

same to me

#

this is my page.jsx (root)

hasty pier Mar 7, 2024, 8:40 PM

#

footer and no footer

dusky oracle Mar 7, 2024, 8:41 PM

#

hasty pier footer and no footer

yea, and this is how it should be

#

but the issue now is that, my / is missing the component

#

see, this is not showing in the /

hasty pier Mar 7, 2024, 8:42 PM

#

the footer? Or what component do you mean?

dusky oracle Mar 7, 2024, 8:43 PM

#

so this is how my / should look like

hasty pier Mar 7, 2024, 8:43 PM

#

yea, I understood, that you page.js does not look like how it should look like. Does the footer stuff works?

dusky oracle Mar 7, 2024, 8:44 PM

#

hasty pier yea, I understood, that you page.js does not look like how it should look like. ...

yes, the footer stuff works now

#

but my page.jsx is broken now

hasty pier Mar 7, 2024, 8:44 PM

#

alright. Your next step is to fix your page. It should look like this: #1215388872314191882 message

dusky oracle Mar 7, 2024, 8:45 PM

#

yes

#

and it did that

#

before i started playing with the layout stuff

hasty pier Mar 7, 2024, 8:46 PM

#

yea, that happends when you are programming... sometimes you broke stuff, sometimes you fix stuff, sometimes you catch bugs, sometimes you add new features. And then? Then you fix the next thing and the next and the next and ...

#

I am not that into your project to help you out with that, sorry

dusky oracle Mar 7, 2024, 8:46 PM

#

okay, thank you for all your help, you provided. again it was my very first time

hasty pier Mar 7, 2024, 8:47 PM

#

np, please mark solution

dusky oracle Mar 7, 2024, 8:49 PM

#

i odnt have apps

hasty pier Mar 7, 2024, 8:49 PM

#

why not?

dusky oracle Mar 7, 2024, 8:49 PM

#

i cant close it

hasty pier Mar 7, 2024, 8:50 PM

#

It’s the same on mobile

dusky oracle Mar 7, 2024, 8:50 PM

#

hasty pier Mar 7, 2024, 8:51 PM

#

you need to hold your finger on one of my messages and then select the "Apps" menu, to mark it as solution

vital trenchBOT Mar 7, 2024, 8:51 PM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1215388872314191882 message)

vital trenchBOT Mar 8, 2024, 3:52 AM

#

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1215388872314191882 message)

coral vector Mar 8, 2024, 3:53 AM

#

dusky oracle i cant close it

Do not delete your original question after it is answered
Do not mark something like “I can’t close it” as the solution. Mark the actual solution message instead

#Multiple layouts