do you mean you want different layout for every page?

Yes, correct, @Ray ! Per folder.

Or is this not the typical way to do it?

What do you personally do for your projects?

you can make the root layout like this

export default function RootLayout({ children }) {
  return <>{children}</>
}

Because my Auth page looks weird now while using the Root Layout.

I always use route group for different layout on my projects

Ooh, that looks way better actually. Thank you @Ray

https://nextjs.org/docs/app/building-your-application/routing/route-groups

That's actually what would solve my question, I think.

yep

you should try it

I definitely will, thank you so much, @Ray !

Hey @Ray, sorry for coming back,

Did you encounter this error earlier when working with Route Groups?

Thank you!

is this the index page?

or /overview?

I am currently at root, index page. But I put the overview folder in brackets.

app/page.tsx
and app/(overview)/page.tsx is conflict

remove app/page.tsx if you want app/(overview)/page.tsx to be the index page

Oh I understand what you mean, I think.

I want the app/page.tsx to still be the index page at root, I want to have a different layout in the app/(overview)/ from the layout that is being used at root.

I'll make a screenrecording quickly, to show you what my problem is.

I hope the screenrecording is a little helpful, sorry. haha.

I think this is what you want app/(overview)/overview/page.tsx?

Sorry I had to leave for a while. But I am trying to have a separate layout for the landing and the overview page. As shown in the screenrecording it currently uses the layout in the overview folder and the root layout in app/layout.tsx.

I don't know if that's what you mean with your answer specifically.

Please let me know, thank you!

if you want different layout for landing and overview page then you should do the following
app/(landing)/layout.tsx
app/(landing)/page.tsx

app/(overview)/layout.tsx
app/(overview)/overview/page.tsx

Thank you, I got a little further, now I get a Hydration error and seems like the middleware isn't working properly anymore, but I'll have to look in to this. I think I am a bit closer to what I need, thank you so much!

do you have html and body in every layout? it should be needed in app/layout.tsx only

No, I don't. Thank you though. I will check some YouTube video's out online to see how others have their project structured, I think it has something to do with how I got certain things structured, or atleast with my middleware, it was somehow working but then when my middleware comes in, some things go downhill, so I'll have to check this out a bit. Thank you very much for your help.

Hey @Ray took me a while, but I fixed it, haha. Thank you so much for your help! 🙂

glad you fixed it

Hey @Ray , It was working for what it seemed like but styling wasn't working, and some other big errors came up I wasn't able solve neither by looking up online.

I've made a screen recording where I show my whole project and the things you told me, I follow in here. Could you please take a look, maybe see what is wrong here? If not, I understand, the screenrecording had to be quick because of the maximum file size.

Thank you so much.

Best regards.

is it on github or codesandbox? I can't tell without seeing the code

No it's not, sorry. Hydration error isn't very specific unfortunately.

the file structure seem ok, should be something wrong with html tag

Okay, thank you. I will try to look for a faulty html tag! :- )