Are layouts just UI components or do they server other functionalities?
Answered
Sokoke posted this in #help-forum
SokokeOP
The file conventions from nextjs docs said we need a layout component for UI segment. To my understanding, this is just the same as a UI component that can be shared across the project. However, I see the example they are naming it strictly to layout.js. My question is do you have to put it alongside with the page.js file inside the route folder? Or, can you put all the layout inside a component a folder and import them as needed?
Answered by Ejayz || PiggyDev
Q1:My question is do you have to put it alongside with the page.js file inside the route folder?A1:Yes you need to put it along side with page.js or /app/rout/pages.js it should be inside the /app or if you have multiple layout like there is different layout for login and sign up they should have different route and layout.js and they should join with their respective pages.js EX file tree:
├───(index)
│ layout.tsx
│ page.tsx
│
├───auth
│ │ layout.tsx
│ │
│ ├───login
│ │ page.tsx
│ │
│ └───signup
│ page.tsx
│
└───components
IndexNavbar.tsx
InputWithError.tsx
as you can see each main route like auth and index has their own layout.ts because it has different designs and they are in the main route(auth/(index)) because they are the root file of the page. Q2:can you put all the layout inside a component a folder and import them as needed?A2:No you cant put layout inside component folder . It is considered as Root document/ your main file .That is in my As Far As I Know knowledge hope it helps
2 Replies
Q1:My question is do you have to put it alongside with the page.js file inside the route folder?A1:Yes you need to put it along side with page.js or /app/rout/pages.js it should be inside the /app or if you have multiple layout like there is different layout for login and sign up they should have different route and layout.js and they should join with their respective pages.js EX file tree:
├───(index)
│ layout.tsx
│ page.tsx
│
├───auth
│ │ layout.tsx
│ │
│ ├───login
│ │ page.tsx
│ │
│ └───signup
│ page.tsx
│
└───components
IndexNavbar.tsx
InputWithError.tsx
as you can see each main route like auth and index has their own layout.ts because it has different designs and they are in the main route(auth/(index)) because they are the root file of the page. Q2:can you put all the layout inside a component a folder and import them as needed?A2:No you cant put layout inside component folder . It is considered as Root document/ your main file .That is in my As Far As I Know knowledge hope it helps
Answer
SokokeOP
thanks for your help