How to create conditional headers in nextjs
Вставка
- Опубліковано 30 кві 2024
- My Products
📖 ProjectPlannerAI: projectplannerai.com
🤖 IconGeneratorAI: icongeneratorai.com
📝 ThumbnailCritique: thumbnailcritique.com
Useful Links
💬 Discord: / discord
🔔 Newsletter: newsletter.webdevcody.com/
📁 GitHub: github.com/webdevcody
📺 Twitch: / webdevcody
🤖 Website: webdevcody.com
🐦 Twitter: / webdevcody
Nah bro don't say that you aint no noob! You are great! Thanks to you I learned a lot of things about Next.JS and IMO the most important part of my career was watching YOUR courses on S3 which helped me greatly!
agreed!
you are correct. nested layouts are the best way to achieve that.
I would only use parallel routes for granular loading of multiple data in a page, or for modals, but not for static parts of a layout.
It would be cool to bring a video showing how you configure your vscode
I am developing mobile first app. So title on header may change depends on route and there is an general right button for some custom actions. So I make a generic layout component which takes headerProps and children as prop, so that we can give custom abilities to header on each page. I can use this template most of private pages like this:
// here is page itself
İf you have very dynamic header, you can also take header from props but jsx version. By using this version, youe layout component will put this header jsx to the right place(maybe header slot has max height or smth. This rule managed by layout ocmponent but header content will be rendered by page.tsx
Cody please review React 19 and how can we get the same performance out of it as nextjs.
I tried both, and I prefer Nested/Grouped Layout
How did you add that loading bar on top of the page with nextjs?
It’s an npm module called toploader
Hey Cody - what's this VS Code theme called? Thx
bearded theme - stained blue and the icons is bearded icons
Cody how do you handle caching?
For every page i have added force dynamic and revalidat =0 but i want to take adv of caching
Use NoStore on pages or functions that fetch data from the db
You’re doing great sweetheart ❤
Thank you sexy 😘
Maybe you could use a single layout if you make the component a client component, with the usePathname() hook from next you can check for the pathname and conditionally pass the different links to the component. Maybe keep the nested layouts when you actually need to add new layout on top of the previous layout.
My issue is my header needs server component links. I guess I could just pass in the server component regardless and just not render it depending on the path. I’m still trying to figure out the best way to achieve this. I tried with parallel routes as well but it also feels hacky
@@WebDevCody I am working on exactly the same case in my current team. First of all, thank you very much for opening my horizons. I wonder why you need to use the link components on the server side? I'm trying to do the conditional header rendering on the server side because I feel it will be more valid, but as you know, I'm not very convinced and in some cases I can't find a solution. Hope to hear your ideas on this subject and your new approaches in the future.
This isn't relevant to the video (great job btw!) but with all your side projects, do you run them out of multiple stripe accounts on the same llc? I've wondered about doing something like that myself.
You have to make a new stripe account for each website, but all of those accounts are linked to my LLC
@@WebDevCody That's what I was thinking. I really appreciate the prompt response!
Hey Cody, How do you manage authentication and authorization for this project?
Next auth
@@WebDevCody Cool man, thanks. Also do you have a discord or any platform where I can ask doubts from anyone in the community?
EDIT: I joined the discord :D
but the tradeoff is, it full refreshes switching, doing that for the main layout. is it not better to just get pathname and show header in layout accordingly?
I don't think it refreshes when you switch between routes that have the same header, but for other ones yes probably it would refresh but that's fine not a bit deal ig. For the pathname thing, I don't think that's the recommended way to do it even if it could work, the whole idea behind the app router is to not have to deal with routes yourself through pathname and stuff like that and let nextjs manage that for you, i guess one of the reasons is that your logic can easily break when you switch from dev to prod as your pathname changes from localhost to your domain name, it's probably doable it's just not as straightforward as letting nextjs manage that
@@yassinesafraoui it does full refresh if those are both main layouts defined in the (group 1)/layout, (group 2)/layout thing. but this is true only for using more than 1 main layouts. nextjs app folder is so quirky tbh but at least it is well documented.
It's just unfortunate that Next.js doesn't provide a straightforward way to retrieve the current route on the server and conditionally render components like the header in the root app layout.
This would greatly simplify things and is a feature many developers have requested, as evidenced by the numerous complaints in their repo issues.
Hopefully, future versions of Next.js will address this gap to enhance routing flexibility and developer experience.
For real, this simple functionality becomes super annoying to implement
Hello
(public)
publicRoute1/
publicRoute2/
(private)
privateRoute1/
privateRoute2/
maybe?
Yeah that would work as well