Multiple Layouts in App directory

[somber trench]

So i know we need to have a layout file in the app directory.
I also know that this can be done server side - which should allow us to connect to a DB (mongodb) and fetch sites logos, images etc - not sure though.

The question however is can you have a totally different layout.tsx file in a subfolder like dashboard for example?

also can we still use hooks to load themes?

like something like this which is currently in /hocs folder

[cinder zephyr]

If you're talking about separate layouts entirely, I believe you can create grouped folders with () so like

app/
  (LayoutOne)/
    layout.tsx
    page.tsx
  (LayoutTwo)/ 
    layout.tsx
    dashboard/
      page.tsx

as an example

[somber trench]

so you create a folder called (LayoutOne)/ followed by all folders + files needed? and same for (LayoutTwo)

It's not

app/
    layout.tsx
    page.tsx
    dashboard/
      layout.tsx
      page.tsx

i am just now wondering how it loads the home page if each layout is a folder?

[cinder zephyr]

Assuming you want the layouts to be scoped specifically to those pages, yes. Any folder surrounded by parentheses is ignored in the route

As long as there is only one page.tsx in the base level of one of the two (or however many) folders you have, it will load that as the home page.
Just think of it as you're scoping those layouts to specific pages, the rest of the file structure is exactly the same and is treated exactly the same

[cinder zephyr]

But yes, this is correct. You could name the folders whatever you want, they don't have to be LayoutOne and LayoutTwo, they just have to have the parentheses

[cinder zephyr]

Not sure whether I explained this the best here, so

app/
  (LayoutOne)/
    layout.tsx
    page.tsx
  (LayoutTwo)/ 
    layout.tsx
    dashboard/
      page.tsx

works functionally the same as

app/
  layout.tsx
  page.tsx
  dashboard/
    page.tsx

It just serves as a way of scoping the layouts to specific pages

[somber trench]

I'll give it a try, I am trying to convert my pages/ application to nextJS app directory and it is causing me headaches, mainly because we use hocs to load themes.

[cinder zephyr]

Unfortunately I'm not sure how you would go about moving the themes over, I'm in the process of trying to learn nextJS myself. But hopefully someone who might know more about it manages to pop in and help with that part :/