Hamed, it's truly a great pleasure learning from and watching your videos. I'm incredibly proud of you, man. You're doing something rare and special, and it really means a lot. Parcham balast! 🇮🇷 Keep soaring high!"
Firstly, thanks so much for the video! However, is there any possibility of doing this theme switcher on server components? My understanding is that client components aren't the best for SEO and if the entire website is wrapped in the client component for the theme, doesn't that mean the entire site isn't at all good for SEO?
First of all wrapping your app with a client component doesn't turn all into client components. You can pass server components as children to client components without affecting the boundary. Secondly, in NextJs client components are pre-rendered on the server and then hydrated on the client, which means your initial response has content as far as SEO is concerned, this is one of the reasons people use NextJs: for SEO purposes.
Good question! You cannot import server components in client components, but you can pass server components as props or children to a client component without turning them into a client component.
@@hamedbahram But how will you read the theme in children?🤔 If you use a custom hook for the theme provider, you'll immediately make the page a client component (since hooks only work in 'use client'). I’m trying to find a solution and still can’t find one.🤷♀
I'm following the next js series, may I ask if you can do RTL and Internationalization for EN and AR languages inside the app directory. Love your videos, keep going.
Hey! Yeah you can render them inside a button and use the `setTheme` function to toggle the theme when the button is clicked. Does that answer your question?
This solution for the Hydration problem only work for dark/light. If you create an environment with custom themes, for example greenish, bluish and reddish nothing prevent the error... I'm using NextJS 3.4.8, next-themes 0.2.1 and Tailwind 3.3.2.
You can have a `color` or `fill` attribute on your `svg` element that controls the color or fill. I usually set that to "currentColor" like `color="currentColor" and then change the color on the parent of the svg depending on the theme, or you can set the hex color you want directly on the `svg` like `color="#fff"
Hi, how can I use multiple themes like light, dark, custom1, custom2 with different color schemes. As you specified only two themes i.e. light and dark only, thanks
Good question! you can pass in multiple themes to the `ThemeProvider` component from `next-themes` something like this: ``. You can read more about this here: github.com/pacocoursey/next-themes#more-than-light-and-dark-mode You would then also need to add custom variants to Tailwind to support these added themes. You read about adding custom variants here: tailwindcss.com/docs/plugins#adding-variants
Is this package keep the user selection in the browser like localstorage for the next reload? And if it's so in the first mounting we have the default theme in the server like light and if in the browser it has a variable saying hey use the dark one so we see that light page for a second then when js has loaded on the browser the theme will have changed! (( a really bad problem ))
ThemeProvider automatically injects a script into next/head to update the html element with the correct attributes before the rest of your page loads. This means the page will not flash.
Hi Hamed, I've been following your videos . I am planning to work on an ecommerce project where there will be multiple frontends for client side, admin panel, probably mobile app and so on. previously i used to do such projects using rest api. but since next js is itself a fullstack framework and if i use it for client side, how am i supposed to design my entire project which includes other frontend too?
Hey Aayush! what do you mean by different frontends? do you mean different libraries, like react, vue, svelte, etc.? in that case a rest API would be the correct path. If by different frontends you mean, different designs, you can use styles to apply different themes, or if you want to build entirely different websites, you can use turborepo to share the core functionality while building different apps in the same repo. Does that answer your question?
@@hamedbahramby different front end I mean different react project. For example if my ecommerce client side is done using next framework, how can i use the framework's server routes for running admin panel(made using different react project )
For different projects (different react apps), you're best path is to build a REST API to all your different apps can talk to. That said, your admin panel, doesn't need to be an entirely different app, it can live in a route on the same project that's powering your ecommerce store.
Do anyone have same problem in rendering. When I put Dark Mode and refresh then the light mode turn on and dark mode turn after that rendering. So this flashing. Do I need to save that value in Cookies?
I haven't run into this problem. But try passing the `suppressHydrationWarning` prop instead of setting the `class` and `style` attribute on the html tag. Let me know if that solves the problem.
Thank you for your effort and information. I have a question. I did implemented dark theme to my starter project as you do. But when I refresh the page, it always blinks the light mode, and then dark mode. Do you have ideas to solve this?
Is it still server side rendered then if we're wrapping the app in the Providers which is a use client component? Did we just lose server side rendering on the app? Sorry, still new to this.
No we haven't lost it ;) You can pass server components as `children` to client components and they'd still be server components - rendered on the server. However, if you _import_ a server component into a client component, it will become a client component. You can watch this video where I explain the new component composition in the `app` router => ua-cam.com/video/3Dw6D_WuzSE/v-deo.html
if i apply next-themes for dark mode, all of child component are client components? why i think like that because it is the Providers is 'use client'(client component) that surrounds {children}. please teaching me... thank you!
Good question! No, they won't become client components. If you _import_ a server component into a client component, it'll become a client component. However, if you pass server components as _children_ to client components, they will remain server components. You can watch this video to learn more => ua-cam.com/video/3Dw6D_WuzSE/v-deo.html
Everything renders and works appropriately, but wrapping the body tags with my provider gives two of these errors: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching in . and also.... one of these errors: Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. My provider export also contains a context provider. Perhaps that is contributing to the error?
Hi, your content is amazing. i have a question if we wrap the whole app in client component then all the children components don't they become a client component.
Good question! No they won't become client components. Basically if you import a server component into a client component it'll become a client component. However if you pass server components as children to client components, they won't become a server component.
I learned something unexpected watching your video - I never realised double-clicking a file in VSCode opens it and removes the "preview mode" (italic name in the tab) status. I would always open the file, then ctrl+s to lock it in... *facepalm*
You can use the new metadata API to change the favicon programatically. You can read here: nextjs.org/docs/app/building-your-application/optimizing/metadata
Nope it doesn't, you can pass server components as props to a client component without affecting the server/client boundary. I have a video on the channel about server and client components and when to use which, watch that to have a better understanding.
@@hamedbahram I placed a console.log('test') in a component that replaces {children} and a child of ThemeProvider, the console.log output appeared in the integrated VSCode terminal, so it was on the server side. I'm increasingly impressed with Next.js 13.
Is there any other way to transmit data besides using a URL? It becomes quite confusing when we rely on context to handle states, yet we're unable to transmit the state to the server component. please help@@hamedbahram
Hamed, it's truly a great pleasure learning from and watching your videos. I'm incredibly proud of you, man. You're doing something rare and special, and it really means a lot. Parcham balast! 🇮🇷
Keep soaring high!"
Eraadat Shahab jan 🫡 I appreciate that!
many thanks - have been trying (and failing) to get context to work with v13 all day. This is so great - thank you
Glad it helped! Appreciate your comment.
i cant explain how this video helpful. thank you mate!
Glad it helped!
Another great video with very recent NextJs features.
Appreciate that Giovanni!
really appreciate it , I met the same problem .
My pleasure!
Firstly, thanks so much for the video! However, is there any possibility of doing this theme switcher on server components? My understanding is that client components aren't the best for SEO and if the entire website is wrapped in the client component for the theme, doesn't that mean the entire site isn't at all good for SEO?
First of all wrapping your app with a client component doesn't turn all into client components. You can pass server components as children to client components without affecting the boundary. Secondly, in NextJs client components are pre-rendered on the server and then hydrated on the client, which means your initial response has content as far as SEO is concerned, this is one of the reasons people use NextJs: for SEO purposes.
very helpful and easy explanation thanks
Glad it was helpful!
is very clear, here we say "clearer add water" 😃 "mas claro hechale agua", thanks! 👍
Thanks Alberto!
Thank you hamed, its very useful
Glad to hear that
Thank, man! Very useful tutorial. Did this and worked perfectly for me! Cheers from Brazil
Great to hear that Matheus!
😮 amazing, keep going 👌🏼
Thanks buddy 🙏🏽
Great video. Do you know how we should pass the children in the ThemeProvider on a tsx file?
Same way with the `children: React.ReactNode` type
Hi, Great video!
When I use 'use client' for the ThemeProvider the children all become "client components"?
Good question! You cannot import server components in client components, but you can pass server components as props or children to a client component without turning them into a client component.
@@hamedbahram But how will you read the theme in children?🤔 If you use a custom hook for the theme provider, you'll immediately make the page a client component (since hooks only work in 'use client'). I’m trying to find a solution and still can’t find one.🤷♀
Just implimented this last week! Good to know I did it correctly. Great video as always and you are appreciated
Thanks for tuning in Shawn!
In the first solution, the error remains when you change to dark mode and then reload the page.
Thanks for sharing. That's a good point 🤔 In that case the `suppresshydrationwarning` is the way to go 🙂
Thank you!! this was so helpful
Glad it was helpful!
I'm following the next js series, may I ask if you can do RTL and Internationalization for EN and AR languages inside the app directory.
Love your videos, keep going.
Great suggestion! I'll definitely cover that in future videos.
i just add
@@hassanallen1823 Absolutely! then you can use tailwind to apply `:rtl` modifier. Thanks for the comment Hassan!
@@hamedbahram you're welcome hamed jan love your videos 3>
@@hassanallen1823 eraadat 🫡
Thank you Brother... att. Jose Grillo - Venezuela
You're welcome Jose!
Hi. can we use a lottie to switch the theme from dark to light and back on clicking the lottie. Can u help me
Hey! Yeah you can render them inside a button and use the `setTheme` function to toggle the theme when the button is clicked. Does that answer your question?
This solution for the Hydration problem only work for dark/light. If you create an environment with custom themes, for example greenish, bluish and reddish nothing prevent the error... I'm using NextJS 3.4.8, next-themes 0.2.1 and Tailwind 3.3.2.
Did you try the `suppressHydrationWarning` prop on your `html` tag?
Good video! saludos desde argentina 😉
Saludos Agustin!
thank you for sharing i appreciate your help, can you plz explain how we can switch the svg logo color when the theme is changed ?
You can have a `color` or `fill` attribute on your `svg` element that controls the color or fill. I usually set that to "currentColor" like `color="currentColor" and then change the color on the parent of the svg depending on the theme, or you can set the hex color you want directly on the `svg` like `color="#fff"
thank you @@hamedbahram
@@hist-geo8489 you're welcome.
Thanks for great tutorial video!! fyi, your course site's "order now" button has higher zindex than header navigation bar :)
You're right 😅 thanks for flagging that.
Nice content hamed
Thanks 🙏🏽
Thanks for the good video
You're welcome!
Hi, how can I use multiple themes like light, dark, custom1, custom2 with different color schemes. As you specified only two themes i.e. light and dark only, thanks
Good question! you can pass in multiple themes to the `ThemeProvider` component from `next-themes` something like this: ``. You can read more about this here: github.com/pacocoursey/next-themes#more-than-light-and-dark-mode
You would then also need to add custom variants to Tailwind to support these added themes. You read about adding custom variants here: tailwindcss.com/docs/plugins#adding-variants
Did you manage to create more than dark/light themes ? Today I finally did it but still that Hydration errors...
@@asfnobambu That's awesome! Do you mind creating a PR on my repo for it?
Is this package keep the user selection in the browser like localstorage for the next reload? And if it's so in the first mounting we have the default theme in the server like light and if in the browser it has a variable saying hey use the dark one so we see that light page for a second then when js has loaded on the browser the theme will have changed! (( a really bad problem ))
ThemeProvider automatically injects a script into next/head to update the html element with the correct attributes before the rest of your page loads. This means the page will not flash.
Hi Hamed,
I've been following your videos . I am planning to work on an ecommerce project where there will be multiple frontends for client side, admin panel, probably mobile app and so on. previously i used to do such projects using rest api. but since next js is itself a fullstack framework and if i use it for client side, how am i supposed to design my entire project which includes other frontend too?
Hey Aayush! what do you mean by different frontends? do you mean different libraries, like react, vue, svelte, etc.? in that case a rest API would be the correct path. If by different frontends you mean, different designs, you can use styles to apply different themes, or if you want to build entirely different websites, you can use turborepo to share the core functionality while building different apps in the same repo. Does that answer your question?
@@hamedbahramby different front end
I mean different react project. For example if my ecommerce client side is done using next framework, how can i use the framework's server routes for running admin panel(made using different react project )
For different projects (different react apps), you're best path is to build a REST API to all your different apps can talk to. That said, your admin panel, doesn't need to be an entirely different app, it can live in a route on the same project that's powering your ecommerce store.
Do anyone have same problem in rendering. When I put Dark Mode and refresh then the light mode turn on and dark mode turn after that rendering. So this flashing. Do I need to save that value in Cookies?
I haven't run into this problem. But try passing the `suppressHydrationWarning` prop instead of setting the `class` and `style` attribute on the html tag. Let me know if that solves the problem.
Have you solved the problem? I have the same situation.
Thanks hamed , but how to use next-themes with MUI ?
That'll make a good subject for another video.
@@hamedbahram thanks hamed .. waiting for this Video 😊
Thank you for your effort and information. I have a question. I did implemented dark theme to my starter project as you do. But when I refresh the page, it always blinks the light mode, and then dark mode.
Do you have ideas to solve this?
Try using the `suppressHydrationWarning` prop and remove the manual `class` and `style` attributes from the html tag.
@@hamedbahram i guess this will also leave the same issue.
@@sohrabkhan101 I'm not sure why that is, I don't seem to have that issue on my end.
Did u solve ur problem? I have the same:(
@@lasterius Well, technically, I didn't do anything different but I don't have this error anymore... Just update your nextjs version maybe?
Thank You 😍
You're welcome 😊
how to adjust theme for a particular section ??
set a class corresponding to the theme you want on the parent of that section.
Is it still server side rendered then if we're wrapping the app in the Providers which is a use client component? Did we just lose server side rendering on the app? Sorry, still new to this.
No we haven't lost it ;) You can pass server components as `children` to client components and they'd still be server components - rendered on the server. However, if you _import_ a server component into a client component, it will become a client component. You can watch this video where I explain the new component composition in the `app` router => ua-cam.com/video/3Dw6D_WuzSE/v-deo.html
its ok i can enable it and get this butto wor switch between dark&light but when i want to use dark: for dark them style it dont work
Clone my code and see what you're doing differently.
if i apply next-themes for dark mode, all of child component are client components?
why i think like that because it is the Providers is 'use client'(client component) that surrounds {children}.
please teaching me... thank you!
Good question! No, they won't become client components. If you _import_ a server component into a client component, it'll become a client component. However, if you pass server components as _children_ to client components, they will remain server components. You can watch this video to learn more => ua-cam.com/video/3Dw6D_WuzSE/v-deo.html
@@hamedbahram thank you for teaching!!!!! i love u :D
@@즐거운코딩시간 you're welcome!
Amazing 🔥🔥
Thanks
thank you
You're welcome
thank you! it helps me a lot
You're welcome! Glad it was helpful.
great as always! thanks
My pleasure.
Everything renders and works appropriately, but wrapping the body tags with my provider gives two of these errors: Error: Hydration failed because the initial UI does not match what was rendered on the server. Warning: Expected server HTML to contain a matching in . and also.... one of these errors: Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering. My provider export also contains a context provider. Perhaps that is contributing to the error?
Not sure why you're getting these errors. Clone my repo and see if you still have the same problem.
I do it but I have 3 errors the same error @WisenTheMind . why?
I am getting the same errors as you. I am using the 'suppressHydrationWarning' attribute on html tag. Did you find a fix?
me too
Hi, your content is amazing. i have a question if we wrap the whole app in client component then all the children components don't they become a client component.
Good question! No they won't become client components. Basically if you import a server component into a client component it'll become a client component. However if you pass server components as children to client components, they won't become a server component.
@@hamedbahram thanks for response♥️. It was confusing for some time.
@@MudassirKhan-sx9jy anytime!
To change the color when the dark mode is even darker, where is it?
I'm not sure if I understand the question ?!
So we need next-themes just to toggle one CSS class?
It also reads the system preferences 😅
make video on backend also Thank you for spending your valuable time tech us 👍.
You're welcome Uday, thanks for your feedback. What type of backend videos would you like to see?
I learned something unexpected watching your video - I never realised double-clicking a file in VSCode opens it and removes the "preview mode" (italic name in the tab) status. I would always open the file, then ctrl+s to lock it in... *facepalm*
Sweet!
Great materials and explanation, very useful 👍
Glad it was helpful!
How can i toggle favicon?
You can use the new metadata API to change the favicon programatically. You can read here: nextjs.org/docs/app/building-your-application/optimizing/metadata
Ohh man, if you used typescript in your videos, they would be perfect
Thanks for your feedback Raphael.
@@hamedbahram Yes please, it is requested to please make all your future videos in typescript.
@@luqmanusman70 thanks for your feedback Luqman!
Wrapping the entire application with a "use client" component makes all children on the client side, right?
Nope it doesn't, you can pass server components as props to a client component without affecting the server/client boundary. I have a video on the channel about server and client components and when to use which, watch that to have a better understanding.
@@hamedbahram
I placed a console.log('test') in a component that replaces {children} and a child of ThemeProvider, the console.log output appeared in the integrated VSCode terminal, so it was on the server side.
I'm increasingly impressed with Next.js 13.
@@gabrieldearruda5286 cool!
Am I the only one who experiences the same error when switching to dark mode and performing a manual page refresh?
first option fails but supressHydrationWarning works fine in all the three modes.
What error are you experiencing?
That's right, setting the attributes manually would prevent reading the system preferences.
@@hamedbahram @17:40 same error
switch to dark theme and make a page refresh . the error still exists, sir.
I though you're going to use it with server components
We are using the themes in our server components, however to share the global context or to switch the theme we need client components.
Then the children components of a parent client component is server component 😅
That's the beauty! Interleaving client and server components as needed.
how can I pass context data to server component?
via the url.
Is there any other way to transmit data besides using a URL? It becomes quite confusing when we rely on context to handle states, yet we're unable to transmit the state to the server component. please help@@hamedbahram