Nextjs Layout
Hello, I want to ask about a way to remove the root layout from displaying in a certain component file, I tried many things but tge root layout keeps displaying, how can I achieve this?
11 Replies
Do you have another layout setup for the route that displays this component?
@eioluseyi yes, I created a layout for that component, but as I know it does not solve my problem, since what happens in this case that the component will display both layouts, the root and its own layout.
@Kiritsu Then the problem will be where you implemented the layouts with the routes.
In the sense that you most likely have nested the second layout in the default layout , which is why both will show up at the same time.
All these I am saying are speculations based on what you have said so far, since I can't see the code structure.
A good point of reference for me would be to share the contents of the file where you implemented the layouts and the routes
@eioluseyi https://github.com/Kiritsu0/Facebook-Clone
GitHub
GitHub - Kiritsu0/Facebook-Clone
Contribute to Kiritsu0/Facebook-Clone development by creating an account on GitHub.
this is my code
but I delete layout for the "stories" router since nothing happen so there is no meaning from keeping it, or there is but I do not know what it is and how to let it replace the root layout with it.
Hi @Kiritsu
So, when I started talking with you, I assumed (MY BAD) that you were using Next 13 or at least, Next 14 with the pages routing model, but on seeing your code, I realised my mistake.
Here's a graphical representation of how Next 14 with app structure renders
So, by default, your Root layout is always set to render.
From that point of view, one trick you can do is to change the JSX that is rendered inside the Layout component based on the current path.
That is hacky, but depending on what you are trying to achieve, that might just be the best solution.
However, what I would rather suggest would be to use the Multiple Root Layouts option of Next 14 (app structure)
You can find how to implement it here:
https://nextjs.org/docs/app/building-your-application/routing/route-groups#creating-multiple-root-layouts
Routing: Route Groups | Next.js
Route Groups can be used to partition your Next.js application into different sections.
This is really what it is in a nutshell
I'd advice you read the whole page (Route Groups) to understand it fully
If you need more help, holla.
If you understand it and have it working, let me know also