remove header for a certain page but layout.js not working
Answered
CHEEMDA MAN posted this in #help-forum
i was trying to remove my header from a certain page by making different layout.js for that route and it removed successfully but when i'm refreshing the page the header appear on that page i'm attaching my app folder image so you'll know how i set my layout.js
Answered by James4u (Tag me if needed)
so as I said,
app/layout.js is sort of global layout that covers all of your pages80 Replies
show me your
app/layout.js and app/signin/layout.jsI believe you have something wrong on your codebase.
so let say you have two types of pages with different header
so let say you have two types of pages with different header
https://nextjs.org/docs/app/building-your-application/routing/route-groups
group them using route group and have your layout.jsx for them
group them using route group and have your layout.jsx for them
@CHEEMDA MAN let me know the result
well, you have messed up everything
howw
as Isee html and body tags in your
app/signin/layout.jshere it is
so app/layout.js is the root layout that covers all of your pages
yea
yeah, you shouldn't have them in your sub layout
i have to remove html and body tags from it?
so the output is like
<RootLayout>
<SubLayout>
</SubLayout>
</RootLayout>yeah
just take a min to read about route groups
done
ah that was i try i suppose to write done
okay but you should notice you still get header in your signin page
it's because as I said
/app/layout.js is sort of root layout that covers the whole pagesyou also don't need to import global.css there
oh okay so i have to remove header from that and add a sub layout in my admin folder
oh ok ok
yeah, that should also work
but think in this way, you have lots of routes to add header
right? then you have to create sub layout with header
like you are duplicating the same code
yeah im thinking thee same thing
route groups are there to solve that issue
oh okay
Border Terrier
i was just about to link it
group the routes (that need headers) (that doesn't need headers)
and create layout for those two route groups
that should solve the problem, right?
okay
Border Terrier
that will solve everything
so i have to create (admin) (signin)
I would suggest (auth) (public)
but yeah it's up to you
ah okay is the name of group will appear in route?
then ig your suggestion is better
please mark solution to close the thread! 🙂
Border Terrier
yes
ah.. let me try it..
okay
Border Terrier
but, wait
well, I meant something different
Border Terrier
just quick question
by public, I meant all public pages that doesn't require authentication like landing pages (in the landing pages, blogs, they share the same header/navbar)
..oh
askk
and by auth, I meant pages that require authentication - after login, we normally have different layout
ah actually this project will not contains any page without authentication exclude signin
but as I said, you can define your route groups as you want - I think you know what you need to do
okay I see - in my scenario, login page is also
public as everyone can accessyeah..
ohhh thanks got your point
i have to shift my signin in public and dashboard in auth
greatt
@James4u (Tag me if needed) one last question is my app/(public)/layout.js have to look like this??
do you still have
app/layout.js ? assuming yesyea..
so as I said,
app/layout.js is sort of global layout that covers all of your pagesAnswer
think, you already imported fonts, and css from global.css
oh okay that means i dont need that
in my app/layout.js yeahh
Nope, it doesn't mean you don't need it
so let say, you have those fonts and some client providers that are needed in both (public) and (auth)
ah i mean i dont need html and body tags in sub layout
your root layout is the place where you should import/wrap common things
yeaa
yeah, you don't need - You shouldn't have them
ok ok thanks brother