Great video, I was shaking my head about halfway through thinking that if you're fighting against Next this much you're doing it the wrong way, but I see the purpose of the video now. This is a great mental exercise to help folks understand the model of server/client components. Side note: technically you could've made it work by passing a key to your layout with the value of the pathname, but that would've been even more hacky
why don't you just make a link client component, and declare a prop like active class, use the usePathname to check whether the passed href === pathname?
Colby your tutorials are really amazing and helpful. I have a small request. If possible, could you make a video where you show how Storybook can be used to create our own custom UI components library built upon pure css or tailwind or shadCN. For example, I want to create a few reusable components that are modular and customisable. It could include a few atomic components such as button, select, input, etc. Then it could also include some bigger components composed of smaller ones such as a Navbar, a Footer, a Sidebar, etc. This custom UI components collection could then easily be used in any project. Each component could have a few basic custom props such as size, radius, color, etc
not a bad idea! It's been a while since I did a storybook video. not sure when ill get to it so in the meantime, in case one of my old videos help: th-cam.com/video/VApXDsYO5Gg/w-d-xo.html th-cam.com/video/QjZIeA952jE/w-d-xo.html
hey i haven't dug into this kind of thing yet, but i saw this post was recently published, which i haven't read, but have been hearing good things. might help buildui.com/posts/global-progress-in-nextjs
the div and components A & C are server side rendered. Component B has some input fields that, depending on user action, passes certain data to component D. The simple way is to make the div 'use client' and do regular prop passing. But is there a way that preserves SSR of Components A & C?
there's a pattern that's being called the "Donut" pattern, where you can create a component that wraps those (say, replaces the div, or wraps that) which is a Client component, allowing both to coexist, which would allow you to use something like the Context API to handle this sort of thing, like a "traditional" react app so for instances // Client Component // Server // Client, uses FormContext // Server // Client, uses FormContext
Now what approach would you take if you have nested routes? Let's say when you click on the "Movies" link, display sub routes such as movie genres (/watched/movies/comedy). What's an efficient way of showing an active state on the root link and then subsequent child routes. I'm assuming a good old .some() or .filter() method?
created an example, is this what you had in mind? Edit: i just saw that you said both on Root Link AND Child Routes - adding a commit for that github.com/colbyfayock/my-sidebar-links/pull/1 my-sidebar-links-lrs7t9m9p-colbyfayock.vercel.app/watched/movies/comedy One clarification on the code is I wouldn't expect the routes themselves to be staticly defined, and instead be a dynamic route where the routes are generated based on the available data, but just did the static routes for example's sake
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
Great video, I was shaking my head about halfway through thinking that if you're fighting against Next this much you're doing it the wrong way, but I see the purpose of the video now. This is a great mental exercise to help folks understand the model of server/client components.
Side note: technically you could've made it work by passing a key to your layout with the value of the pathname, but that would've been even more hacky
thank you 🙏 glad that came through. didn't know that was a solution! will have to look into that to learn more about it
why don't you just make a link client component, and declare a prop like active class, use the usePathname to check whether the passed href === pathname?
sure, thats another solution!
@@colbyfayock it will be highly reusable
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Colby your tutorials are really amazing and helpful. I have a small request. If possible, could you make a video where you show how Storybook can be used to create our own custom UI components library built upon pure css or tailwind or shadCN. For example, I want to create a few reusable components that are modular and customisable. It could include a few atomic components such as button, select, input, etc. Then it could also include some bigger components composed of smaller ones such as a Navbar, a Footer, a Sidebar, etc. This custom UI components collection could then easily be used in any project. Each component could have a few basic custom props such as size, radius, color, etc
not a bad idea! It's been a while since I did a storybook video. not sure when ill get to it so in the meantime, in case one of my old videos help:
th-cam.com/video/VApXDsYO5Gg/w-d-xo.html
th-cam.com/video/QjZIeA952jE/w-d-xo.html
@@colbyfayock thanks a lot for considering this. Means a lot xD
Very helpful!
Do you know how to make different kind of transitions in nextjs? if i want to set the transition type to
hey i haven't dug into this kind of thing yet, but i saw this post was recently published, which i haven't read, but have been hearing good things. might help buildui.com/posts/global-progress-in-nextjs
Great video! Saved my life here!
Glad it helped 🙌
you're a great teacher! 😊
Thank you! 🙏
How would you solve this
the div and components A & C are server side rendered.
Component B has some input fields that, depending on user action, passes certain data to component D.
The simple way is to make the div 'use client' and do regular prop passing.
But is there a way that preserves SSR of Components A & C?
there's a pattern that's being called the "Donut" pattern, where you can create a component that wraps those (say, replaces the div, or wraps that) which is a Client component, allowing both to coexist, which would allow you to use something like the Context API to handle this sort of thing, like a "traditional" react app
so for instances
// Client Component
// Server
// Client, uses FormContext
// Server
// Client, uses FormContext
@@colbyfayock Thanks for the detailed reply, will definitely look into it. Cheers
Now what approach would you take if you have nested routes? Let's say when you click on the "Movies" link, display sub routes such as movie genres (/watched/movies/comedy). What's an efficient way of showing an active state on the root link and then subsequent child routes. I'm assuming a good old .some() or .filter() method?
created an example, is this what you had in mind? Edit: i just saw that you said both on Root Link AND Child Routes - adding a commit for that
github.com/colbyfayock/my-sidebar-links/pull/1
my-sidebar-links-lrs7t9m9p-colbyfayock.vercel.app/watched/movies/comedy
One clarification on the code is I wouldn't expect the routes themselves to be staticly defined, and instead be a dynamic route where the routes are generated based on the available data, but just did the static routes for example's sake
pushed a commit for the edit - yeah, went with filter. not familiar with the some method will need to check that out
Great video! You also could try pass RSC as children props inside client side component :)
yeah true!
Please make detailed tutorial about middleware in next.js : )
good idea 👀