Multiple layouts

Answered

Crème D’Argent posted this in #help-forum

Open in Discord

Original message was deleted.

Answered by B33fb0n3

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

View full answer

113 Replies

Crème D’Argent

2024-03-07T20:01:35.000Z

@B33fb0n3

B33fb0n3

2024-03-07T20:02:12.000Z

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

Answer

B33fb0n3

2024-03-07T20:02:43.000Z

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

Crème D’Argent

2024-03-07T20:04:22.000Z

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

B33fb0n3

2024-03-07T20:05:05.000Z

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

Crème D’Argent

2024-03-07T20:07:01.000Z

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

B33fb0n3

2024-03-07T20:08:40.000Z

yea

Crème D’Argent

2024-03-07T20:10:34.000Z

cool

B33fb0n3

2024-03-07T20:10:40.000Z

worked?

Crème D’Argent

2024-03-07T20:10:41.000Z

but now my root page, broken

B33fb0n3

2024-03-07T20:10:46.000Z

why?

Crème D’Argent

2024-03-07T20:11:12.000Z

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

B33fb0n3

2024-03-07T20:11:26.000Z

you know what you are doing? ðŸ¤”

@B33fb0n3 you know what you are doing? ðŸ¤”

Crème D’Argent

2024-03-07T20:11:41.000Z

ehmm, not sure anymore

i see it says "RootLayout"

B33fb0n3

2024-03-07T20:12:07.000Z

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

Crème D’Argent

2024-03-07T20:12:15.000Z

yes

B33fb0n3

2024-03-07T20:12:21.000Z

u sure?

Crème D’Argent

2024-03-07T20:12:29.000Z

it gives the same layout for all pages

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

B33fb0n3

2024-03-07T20:13:12.000Z

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

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

Crème D’Argent

2024-03-07T20:13:26.000Z

thats where i get lost

root is for the whole app

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

B33fb0n3

2024-03-07T20:15:19.000Z

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?

Crème D’Argent

2024-03-07T20:16:10.000Z

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?

B33fb0n3

2024-03-07T20:18:12.000Z

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

Crème D’Argent

2024-03-07T20:18:51.000Z

/ = root layout
(pages) = normal layout

B33fb0n3

2024-03-07T20:19:11.000Z

can I see your folder structure again, please?

Crème D’Argent

2024-03-07T20:19:34.000Z

B33fb0n3

2024-03-07T20:20:34.000Z

how does the layout with the red dot look like?

and how the one with the yellow one?

Crème D’Argent

2024-03-07T20:21:23.000Z

they look the exact same

and thats the issue

this is the Root layout

B33fb0n3

2024-03-07T20:22:38.000Z

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.

Crème D’Argent

2024-03-07T20:23:24.000Z

this is the root layout^

B33fb0n3

2024-03-07T20:23:27.000Z

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

@Crème D’Argent this is the root layout^

B33fb0n3

2024-03-07T20:23:45.000Z

the one with the red dot?

Crème D’Argent

2024-03-07T20:23:56.000Z

yes this is the red dot

B33fb0n3

2024-03-07T20:24:21.000Z

- 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?

Crème D’Argent

2024-03-07T20:26:42.000Z

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>
  );
}

B33fb0n3

2024-03-07T20:27:38.000Z

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

take a look at this:
https://nextjs-forum.com/post/1215388872314191882#message-1215394633127956560
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

Crème D’Argent

2024-03-07T20:28:59.000Z

oh okay

i think i got it

B33fb0n3

2024-03-07T20:29:04.000Z

you sure?

Crème D’Argent

2024-03-07T20:30:05.000Z

is this correct?

B33fb0n3

2024-03-07T20:30:33.000Z

So you have now 3 options:
1. Remove the html and body stuff from the one with the yellow dot (and add your footer there)
2. Define multiple root layouts [See here](https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts)
3. I don't know any 3 third option.. lol

Crème D’Argent

2024-03-07T20:31:06.000Z

so this is correct?

B33fb0n3

2024-03-07T20:31:24.000Z

does it work? I don't think so

Please.. I am trying to help you.. ðŸ™‚

Crème D’Argent

2024-03-07T20:32:06.000Z

you could give me the answer

B33fb0n3

2024-03-07T20:32:16.000Z

alright: it's wrong.

@Crème D’Argent Click to see attachment

Crème D’Argent

2024-03-07T20:32:36.000Z

this seems to be right?

but the only thing is the "RootLayout"

which makes me thinking is wrong

B33fb0n3

2024-03-07T20:33:37.000Z

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.

Crème D’Argent

2024-03-07T20:33:39.000Z

is this correct?>

@B33fb0n3 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.

Crème D’Argent

2024-03-07T20:34:15.000Z

i havent touched my red dot root layout

B33fb0n3

2024-03-07T20:34:26.000Z

ah ok, then nvm

Crème D’Argent

2024-03-07T20:34:37.000Z

this is the yellow dot normal layout

@Crème D’Argent Click to see attachment

Crème D’Argent

2024-03-07T20:34:43.000Z

does this look correct to you?

B33fb0n3

2024-03-07T20:35:10.000Z

it does

Crème D’Argent

2024-03-07T20:35:43.000Z

it seems to be working

B33fb0n3

2024-03-07T20:35:54.000Z

u sure?

Crème D’Argent

2024-03-07T20:36:03.000Z

oh no

my root page, looks like this

it went from this

B33fb0n3

2024-03-07T20:37:17.000Z

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 /?

Crème D’Argent

2024-03-07T20:38:49.000Z

i have only changed the from line 24 and down

B33fb0n3

2024-03-07T20:40:09.000Z

looks good for me

Crème D’Argent

2024-03-07T20:40:13.000Z

same to me

this is my page.jsx (root)

B33fb0n3

2024-03-07T20:40:53.000Z

footer and no footer

@B33fb0n3 footer and no footer

Crème D’Argent

2024-03-07T20:41:16.000Z

yea, and this is how it should be

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

Original message was deleted

Crème D’Argent

2024-03-07T20:41:44.000Z

see, this is not showing in the /

B33fb0n3

2024-03-07T20:42:32.000Z

the footer? Or what component do you mean?

Crème D’Argent

2024-03-07T20:43:17.000Z

so this is how my / should look like

B33fb0n3

2024-03-07T20:43:56.000Z

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

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

Crème D’Argent

2024-03-07T20:44:15.000Z

yes, the footer stuff works now

but my page.jsx is broken now

B33fb0n3

2024-03-07T20:44:47.000Z

alright. Your next step is to fix your page. It should look like this: https://nextjs-forum.com/post/1215388872314191882#message-1215399362167971960

Crème D’Argent

2024-03-07T20:45:11.000Z

yes

and it did that

before i started playing with the layout stuff

B33fb0n3

2024-03-07T20:46:28.000Z

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

Crème D’Argent

2024-03-07T20:46:59.000Z

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

B33fb0n3

2024-03-07T20:47:38.000Z

np, please [mark solution](https://cdn.discordapp.com/attachments/1043615796787683408/1117191182133501962/image.png?ex=65f6035e&is=65e38e5e&hm=a481400c78d391dd490c89bdbed759d360975fe0e1d23846c9c78b8cd7c9ec68&)

Crème D’Argent

2024-03-07T20:49:16.000Z

i odnt have apps

B33fb0n3

2024-03-07T20:49:28.000Z

why not?

Crème D’Argent

2024-03-07T20:49:46.000Z

i cant close it

B33fb0n3

2024-03-07T20:50:08.000Z

Itâ€™s the same on mobile

Crème D’Argent

2024-03-07T20:50:52.000Z

B33fb0n3

2024-03-07T20:51:34.000Z

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

@Crème D’Argent i cant close it

joulev

2024-03-08T03:53:53.000Z

1. Do not delete your original question after it is answered
2. Do not mark something like â€œI canâ€™t close itâ€ as the solution. Mark the actual solution message instead

@joulev 1. Do not delete your original question after it is answered 2. Do not mark something like â€œI canâ€™t close itâ€ as the solution. Mark the actual solution message instead

B33fb0n3

2024-03-08T05:42:37.000Z

Thanks ðŸ”¥