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
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
as Isee html and body tags in your
app/signin/layout.js@CHEEMDA MAN here is my signin/layout.js
here it is
so app/layout.js is the root layout that covers all of your pages
@CHEEMDA MAN here it is
yeah, you shouldn't have them in your sub layout
@James4u 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>just take a min to read about route groups
@James4u yeah
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 pages@CHEEMDA MAN Click to see attachment
you also don't need to import global.css there
@James4u it's because as I said `/app/layout.js` is sort of root layout that covers the whole pages
oh okay so i have to remove header from that and add a sub layout in my admin folder
@CHEEMDA MAN oh okay so i have to remove header from that and add a sub layout in my admin folder
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
@James4u but think in this way, you have lots of routes to add header
yeah im thinking thee same thing
route groups are there to solve that issue
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
@James4u I would suggest (auth) (public)
ah okay is the name of group will appear in route?
nope
then ig your suggestion is better
please mark solution to close the thread! 🙂
Border Terrier
yes
@James4u please mark solution to close the thread! 🙂
ah.. let me try it..
Border Terrier
but, wait
@CHEEMDA MAN is i'm using the correct way? <@970430299014041630>
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)
and by auth, I meant pages that require authentication - after login, we normally have different layout
@James4u 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)
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
@CHEEMDA MAN ah actually this project will not contains any page without authentication exclude signin
okay I see - in my scenario, login page is also
public as everyone can accessohhh thanks got your point
i have to shift my signin in public and dashboard in auth
greatt
@James4u one last question is my app/(public)/layout.js have to look like this??
@CHEEMDA MAN <@970430299014041630> one last question is my app/(public)/layout.js have to look like this??
do you still have
app/layout.js ? assuming yesso 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
@James4u so as I said, `app/layout.js` is sort of global layout that covers all of your pages
oh okay that means i dont need that
@James4u think, you already imported fonts, and css from global.css
in my app/layout.js yeahh
@CHEEMDA MAN oh okay that means i dont need that
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)
@James4u Nope, it doesn't mean you don't need it
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
@CHEEMDA MAN ah i mean i dont need html and body tags in sub layout
yeah, you don't need - You shouldn't have them
@James4u yeah, you don't need - You shouldn't have them
ok ok thanks brother