This video was very informative. I am making my first project in next.js and i was facing issue with theme in it. with your video my all isssue are resolved. Thanks a lot!!
I could be missing something, but wouldn't this essentially make ALL of your components "client components"? I mean, you only need to wrap the components in the theme provider that you want to change when you went from light to dark mode, but that would theoretically be any and all that were visible, right?
Good question! As far as I understand it, by wrapping the components inside the ThemeProvider using the "providers" approach we used in this video, doesn't make the children components client components because they are passed as children for the Providers component. When we use the ThemeProvider like we did in this video, it basically wraps all components of the application inside the ThemeProvider. Hopefully this answers your question! :)
directly from nextjs 13 documentation: "use client" sits between server-only and client code. It's placed at the top of a file, above imports, to define the cut-off point where it crosses the boundary from the server-only to the client part. Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle.
Returning null if !mounted is a bad workaround that will end up causing delays and long loading of certain client components. It essentially "waits" a half second or more, then your component appears. I know it's the the way Vercel says to do it, but still problematic. You can render a dummy component until it's mounted, but that's a huge duplication of effort. I found that Tailwind themes SOMEhow work better without any hydration error or delay. Not sure how they are getting the the theme value (probably a CSS media query in the background). But it works And I just typed that all out as I watched the video, not knowing you were going to get to Tailwind and explain that too! Good video, very helpful.
There is not many videos about dark mode with App dir. Thank you for your effort and information! But, on this configuration, when a refresh the page, it blinks from light mode to dark mode. And if course, it's not a good user experience. Do you have any ideas?
I removed the if(!mounted) return {children} and just clear the console since the "extra properties" error is development mode only. No blinking as it returns the ThemeProvider anyway even before mounting.
but, wrapping the entire page in a client component does not make the entire page client side? i thought once you put a parent component that is client side, all of his childrens become client side too
InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('[object Object]') contains HTML space characters, which are not valid in tokens.
"What I meant is that when I do this: const { resolvedTheme } = useTheme(); const arewaTheme = resolvedTheme === 'light' ? lightImage : darkImage; in order to choose my preferred theme, each time I refresh the page, it always defaults to 'darkImage' even though the theme is set to 'light'."
Great video, but I have a question, the themeSwitcher works perfectly locally, but I deployed the application on vercel and my themeSwitcher is simply not rendered, what could be happening? help me plsssss
Do you use tailwind for your nextjs applications or something else? I've found that material ui theme tends to work for me but always looking for new tools
Hi that's a great tutorial, can you tell me why when dark mode is selected and I navigate to another page it reverts to light mode and then back to dark again? Is this how this is supposed to work?
It is an emmet feature. Look up from the Command Palette for Emmet wrap with Abbreviation. You can also let emmet select more HTML selections with Balance Inward and Outward.
Kokeilin tätä, niin pitääko tuo "mode" tallentaa evästeisiin koska itsellä ainakin vilkkuu sivustojen välillä eli kun vaihdan sivua niin se käy "light" teemassa ja siirtyy saman tien "dark" teemaan. Kuitenkin vilkkuu.
Aijaa 🤔 vaikea sanoa suoriltaan, se voi olla että se täytyis tallentaa johonkin. Voisko myös johtua jos ajat dev servulta sitä, eli vilkkuuko jos ajat prod buildia tai deployaat sen esim Vercel?
@@TuomoKankaanpaa mäpä kokeilen. Ja siis selitin ehkä huonosti mut jos refreshaan sivun niin silloin eli kun useEffect ajetaan niin sen takia se vilkkuu uskoisin.
Very good content! Subscribing! It would be great if you did not thank those who leave a nice comment and instead answered the questions of those who need help.
This video was very informative. I am making my first project in next.js and i was facing issue with theme in it. with your video my all isssue are resolved. Thanks a lot!!
Thats great to hear! Thanks!
This was the only one I found explaining within the appDir feature. Thanks a lot !!
Cheers!
I could be missing something, but wouldn't this essentially make ALL of your components "client components"? I mean, you only need to wrap the components in the theme provider that you want to change when you went from light to dark mode, but that would theoretically be any and all that were visible, right?
Good question! As far as I understand it, by wrapping the components inside the ThemeProvider using the "providers" approach we used in this video, doesn't make the children components client components because they are passed as children for the Providers component. When we use the ThemeProvider like we did in this video, it basically wraps all components of the application inside the ThemeProvider. Hopefully this answers your question! :)
directly from nextjs 13 documentation:
"use client" sits between server-only and client code. It's placed at the top of a file, above imports, to define the cut-off point where it crosses the boundary from the server-only to the client part. Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle.
@@matis188 I use this same method and I have plenty of server components inside of providers that are definitely not client components.
@@matis188 so all children will be client in the end? Would be great to have 100% clarification
@@piotrrodzen772 Yes, this tutorial doesn't follow best practices, especially with Next13
Returning null if !mounted is a bad workaround that will end up causing delays and long loading of certain client components. It essentially "waits" a half second or more, then your component appears. I know it's the the way Vercel says to do it, but still problematic. You can render a dummy component until it's mounted, but that's a huge duplication of effort.
I found that Tailwind themes SOMEhow work better without any hydration error or delay. Not sure how they are getting the the theme value (probably a CSS media query in the background). But it works
And I just typed that all out as I watched the video, not knowing you were going to get to Tailwind and explain that too!
Good video, very helpful.
Thanks! 🙌
considering the tailwind tutorial near the end, are you saying that this "return null" could be done better, if so how?
thanks man. i have been trying for three days.this was helpfull
Great to hear that you found it helpful! Thanks for your comment :)
Thanks for this video I really appreciate it. This is the only one I found that implemented light and dark mode with the new app structure.
Cheers!
Thanks you saved me some time with hidratation failing.
Glad I could help!
I loved sir your best teacher teaching to everyone ❤
Thank you!
Thank you so Much! Saved me a ton lot of time.
Glad to hear it!
My issue has been resolved by you :), nice video
Great to hear!
legend, solved my problem! liked and subscribed!
Great to hear, thanks!
Thanks for the clear and great content 💖
Cheers!
There is not many videos about dark mode with App dir. Thank you for your effort and information! But, on this configuration, when a refresh the page, it blinks from light mode to dark mode. And if course, it's not a good user experience. Do you have any ideas?
I removed the if(!mounted) return {children} and just clear the console since the "extra properties" error is development mode only. No blinking as it returns the ThemeProvider anyway even before mounting.
This worked for me as well.@@claudwatari 🥳
very nice explanation, thank you
Cheers!
Great video! Thank you!
Glad you liked it!
Can you share info about your VS Code Themes and Extensions setup? Looks pretty cool
very helpful, thanks!
but, wrapping the entire page in a client component does not make the entire page client side? i thought once you put a parent component that is client side, all of his childrens become client side too
Hey man - thank you so much. I almost never comment or like videos but you helped me so so much - I just had to☺ Do you have a patreon? :)
Wow thank you very much for your comment, I'm glad to hear that the videos have been helpful!
I don't have a patreon at the moment, but if you want to support the channel by tipping you can do it here: bit.ly/3XTXNZu :)
InvalidCharacterError: Failed to execute 'add' on 'DOMTokenList': The token provided ('[object Object]') contains HTML space characters, which are not valid in tokens.
Thanks for the class. Next/image does not work after the page refresh in next themes
"What I meant is that when I do this:
const { resolvedTheme } = useTheme();
const arewaTheme = resolvedTheme === 'light' ? lightImage : darkImage;
in order to choose my preferred theme, each time I refresh the page, it always defaults to 'darkImage' even though the theme is set to 'light'."
Thanks man , but how to use it with MUI ?
This tutorial is very usefull. Thank you
Glad to hear it!
Great video, but I have a question, the themeSwitcher works perfectly locally, but I deployed the application on vercel and my themeSwitcher is simply not rendered, what could be happening? help me plsssss
Thanks for this 💻
Cheers!
Do you use tailwind for your nextjs applications or something else? I've found that material ui theme tends to work for me but always looking for new tools
Thank you for this!!
You are welcome!
Thanks that was so helpful❤
Glad to hear that!
Hi that's a great tutorial, can you tell me why when dark mode is selected and I navigate to another page it reverts to light mode and then back to dark again? Is this how this is supposed to work?
Very useful!
Great to hear!
Hey thank you Tuomo 👍
You are welcome! Thanks for leaving a comment!
Amazing, thanks a lot! At 4:52, how did you wrap automatically in vs code?
Thank you! That's actually not a vscode feature, it was just editing :P
It is an emmet feature. Look up from the Command Palette for Emmet wrap with Abbreviation. You can also let emmet select more HTML selections with Balance Inward and Outward.
Thanks a lot brother !!
You're welcome!
Thank you bro, its good video
Great to hear! Thanks for your comment🙌
Helped me a lot, thanks!🔥
What theme of VS Code you use?
Great to hear! It’s aura dark
Kokeilin tätä, niin pitääko tuo "mode" tallentaa evästeisiin koska itsellä ainakin vilkkuu sivustojen välillä eli kun vaihdan sivua niin se käy "light" teemassa ja siirtyy saman tien "dark" teemaan. Kuitenkin vilkkuu.
Aijaa 🤔 vaikea sanoa suoriltaan, se voi olla että se täytyis tallentaa johonkin. Voisko myös johtua jos ajat dev servulta sitä, eli vilkkuuko jos ajat prod buildia tai deployaat sen esim Vercel?
@@TuomoKankaanpaa mäpä kokeilen. Ja siis selitin ehkä huonosti mut jos refreshaan sivun niin silloin eli kun useEffect ajetaan niin sen takia se vilkkuu uskoisin.
this is amazing tysm
Great to hear!
Thanks it was helpful t
Thank you!
Cheers!
How can we make infinite scroll in nextjs@latest 13.4 with srr .It will be very helpful if you tell me.
Bro cookie or local saved ??? 🤔🤔
What do you mean?
Saisko jonnekki Udemyyn suomeksi näitä. Haluisin esim yhen kurssin jossa teet ”asiakasprojekti” sivut tutoriaalina.
Kiitos palautteesta! Tällä hetkellä valitettavasti videot on vaan englanniks, mutta ehkä tulevaisuudessa voisi myös suomeks tehdä 👍
Why not upload more video ? Sir. I am wating for your video sir
Glad to hear you are waiting for the next videos! They are on their way and I just published a new one!
video is blurry even at 1080p
can you provide the code
Yes of course, sorry my bad I forgot to add them. They are now linked in the video description! :)
@@TuomoKankaanpaa Thankyou so much
Very good content! Subscribing!
It would be great if you did not thank those who leave a nice comment and instead answered the questions of those who need help.
Glad to hear you like the content! About answering questions, I'm trying by best sir!
it is not suitable for SEO
Sorry to hear that!