I wasted 2 days trying to implement this and was still getting a bunch of errors. You saved my life. Can't thank you enough. Nice and clean explanation. Looking forward to learn more from you. Thanks.
Also wanted to add to what most commenters have been saying - I've been trying to figure out how to implement theme providers on NextJS projects that have primarily static pages, and had come to the conclusion that the entire app had to be wrapped in a use client, effectively rendering the SSR aspect of next pointless. Very clear explanation at about 5:00 minutes in. Thank you very much!!
I was doing this from a tutorial I did a while back but it used redux and that caused all softs of issues for me. This is so much easier. Thank you so much! I also appreciate your message at the end!
A couple of questions, 1. What does, "directly render" mean? 2. Maybe answering the first one would answer this one too but here it goes... If we mark the provider with 'use client's directive shouldn't it render only on the client?? If yes, why do we still need to go and suppress hydration errors?? As I'm typing I'm getting the hints about the responses I'd get but still like to hear from you ❤.
First time implementing a dark/light theme in Next.js and thanks to your video it took me just about 2min, and all the expected features are included - system preference, manual control & local storage🤯... Big thanks and keep the great work! P.s. to anyone reading this - guys if you need to use the !mounted / mounted logic inside more than one component, consider creating a custom hook, it's simple af, easy to use and works like a charm.
Thank you. I wish you make a video (in continuation of cache on demand). When I revalidateTag("example") and I use useTransition within onClick I get isPending so I can show the loading spinner, but I have struggled when I revalidateTag from outside the component that is receiving the new data from the page.tsx. In short please make a video about revalidatePath and revalidateTag with showing a spinner in client component. Thank you!!!!!!
My god, thank you! This whole time all I had to do was include suppressHydrationWarning... Why does it not mention that anywhere in the next docs or nextUI docs!?!?! Crazy! I spent hours trying to deal with that warning in the console!!!
The problem i got with your example. "Expected server HTML to contain a matching in ." It appears only after theme change to non system and when i refresh the website. So far, I have not yet solved this problem. I think I have differences between what is displayed on the server side and what the client gets.
Hey Dave, great video. Question; Can you create a video about next.js metadata? In this video I saw you had a bunch so I'd be interested in best practices about it.
Great request! While I didn't create a video on the metadata, I do have several blog posts about metadata and SEO with Next.js here: www.davegray.codes/
Thanks Dave! I was stuck on it for a few days. Is there a way to create a hook or watch to update other components when the button is clicked? For example, I'd to switch logos in other components and render charts differently when the buttons is clicked
Wish there was a way to implement theming without Dynamic functions (cookies to be specific) to use SSG. Without cookies it will flicker on page change because server generated page is in default mode only. Only using separate routes for light and dark variant of generated pages comes to mind, but thats kinda hacky
Yes, I have few components on a page which use swr, as soon as page loads lots of api calls are hit. I used axios interceptors with a random delay using setTimeout, but all are still fired at same time. I tried adding setTimeout in api route handlers still they all are fired at same time. setTimeout was just, ({},random seconds).
*Thank you I watched your React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios video,* I did found a solution, i added a delay in Axios Request interceptor instead of middleware (it was skipping some request,) & also increased time. Also added console.logs to see timing of request, response, delay for each request. So now before calling API axios waits for a delay.
Thank you again for a great video! I'm curious, you created a ThemeSwitch component and marked it as a client component, so this component will be render by client, but why do you have to use the useEffect hook to see if the component is mounted? Please enlighten me, I am new to the tech.
putaquepariu... you are a God... I spent all day trying to do this with next and tailwind but all videos that I have wached, nothing worked... thank you... Hi form Brazil here
@@DaveGrayTeachesCode "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'."
No idea. I use this same approach on my blog that is deployed on Vercel and it works. Maybe you missed something? Here is a blog article that also walks you through step-by-step (and notice the light/dark mode on the blog): www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind
To access environment variables in a Next.js application with Docker on the client side, when i try to access in docker it give me undefined.. solution next js docker
You may have something different - for example, I don't know how Turborepo might impact this. That said, you can see it working in production and read about each step to implement it here: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..I use it on this site.
Yes, this identifies your system preference on the first load. If you do not use the dark/light toggle, it will continue to use the system preference instead of applying what it saves in localStorage.
@@DaveGrayTeachesCode Hey Dave, what if I want to provide a option to manually change to System preference? To do this should I remove whatever saved in localStorage?
It's not that hard to do it without 3rd party library. Seems like people just stopped developing and instead just looking for libraries that do the job. Most WEB dev tutorials these days are reduced to: "get this package, and here's what the docs say how to use it." Where are all the developers gone?"
Yeah. I was just wondering why we couldn't simply implement theming on our own using our dear ol' context api since next js has provided a working way to use it. The package itself is using useContext api under the hood from what I saw.
I just don't want to spend too much time on things that I will touch once or twice during the whole lifetime of a project. That's why I used next theme
Hi Gray, it is working great, but with a slight issue during development. When I first start the server, the theme switcher component is never mounted until I do a refresh from my end. I am sure that you would have also encountered the same issue as well. Is there any way to fix this?
Hi I'm Dave. My last name is Gray. I have no issue. You may have missed a step. I also outline everything step by step in this blog article: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind
Check if you missed anything small from this step-by-step article, too: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..btw, the same thing is implemented on that website.
@@DaveGrayTeachesCode went through it again, everything seems fine. in inspect, when i toggle the button, the html class attribute changes between dark and white
I want to add this functionality to my Navbar Like how to do that I have been able to make it go dark but like to switch it back how to do it using the navbar button can you help me with that
Yes, look at the ThemeSwitch component in my blog article here: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..it does exactly what you want. And my blog site has it deployed as well so you can test it on that page.
I wish to know like how have you implemented the same in the navbar like by default My website is able to take the darkmode but for that switching how do I implement it in the Navbar I want your help on that like can you share your code for the blog website so that I can look into it and get some insights
As noted in the video, it might in dev mode but it won't in production. Check if you missed anything small from this step-by-step article, too: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..btw, the same thing is implemented on that website.
It is difficult to say any one specific way is "the best". Please do share a link to a reference. I explain the difficulty with client side state vs what the server renders in this video. I hope your solution also addresses this issue. I compared dependency size as well. Valtio is 10x larger. You would definitely want to be using it for more than just this if you choose this solution. I have not confirmed that it will prevent a flicker or not.
@DaveGrayTeachesCode please try valtio first, then you will like it. and this method is very short and solves your problem on the server and in the client. I thought your subscribers would also want to know about this method. I don't mean any harm, I grew up with you in your channel and I wanted to share my experience with you.
Im not using next-themes anymore. Why? 1. next-themes outdate (looks like deprecade) 2. Not support cookies. Build darkmode with next js app DIR not difficult. Just use cookies and middleware
next-themes has not updated their npmjs.com page, but they have updated their GitHub ReadMe page which is linked in this video description. There is a section on App Router support. It is not deprecated. Cookies aren't needed for this. I show how it works with localStorage and prevents the flash/flicker. I'm sure there are other solutions and yours may be a good one. If you have a link, please share. That said, no need to say another solution is not worthwhile. It has been noted as a difficult problem to solve as you can see here: github.com/vercel/next.js/discussions/53063
@@DaveGrayTeachesCode for example not-found page. This is serverside and not accept any props. I need to know what current active themes. So i can render different svg image. This is why i need cookies instead of localstorage
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 1](http://i.ytimg.com/vi/mV5bGIswTtQ/mqdefault.jpg)
I wasted 2 days trying to implement this and was still getting a bunch of errors. You saved my life. Can't thank you enough. Nice and clean explanation. Looking forward to learn more from you. Thanks.
Also wanted to add to what most commenters have been saying - I've been trying to figure out how to implement theme providers on NextJS projects that have primarily static pages, and had come to the conclusion that the entire app had to be wrapped in a use client, effectively rendering the SSR aspect of next pointless. Very clear explanation at about 5:00 minutes in. Thank you very much!!
The "Add provider to your layout" perfectly explains a very confusing part of SSR. Well done 👏👏👏
I was doing this from a tutorial I did a while back but it used redux and that caused all softs of issues for me. This is so much easier. Thank you so much! I also appreciate your message at the end!
No idea why , but the format when you are also visible makes is so much better !
Thank you! I'll keep trying to do this 💯
Because he is a handsome fellow.
Awesome stuff Dave!!
Plus the new intro look is fire and your image there along with the code is nice also. Sleek!
Thank you!
A couple of questions,
1. What does, "directly render" mean?
2. Maybe answering the first one would answer this one too but here it goes... If we mark the provider with 'use client's directive shouldn't it render only on the client?? If yes, why do we still need to go and suppress hydration errors??
As I'm typing I'm getting the hints about the responses I'd get but still like to hear from you ❤.
Thanks, this video helped me implement dark mode in my portfolio within 2-3 minutes.
First time implementing a dark/light theme in Next.js and thanks to your video it took me just about 2min, and all the expected features are included - system preference, manual control & local storage🤯... Big thanks and keep the great work!
P.s. to anyone reading this - guys if you need to use the !mounted / mounted logic inside more than one component, consider creating a custom hook, it's simple af, easy to use and works like a charm.
Glad it helped!
Thanks man, I implement that with localstorage but that flash was driving me insane, you save my sanity 😂
You make it look so easy. Thank you for explaining the theme switcher so well.
from your videos everything is soo easy sir
thank you!! this video really helped me to implement theme switching in Next.js without any flicker
Glad it helped!
Thank you. I wish you make a video (in continuation of cache on demand). When I revalidateTag("example") and I use useTransition within onClick I get isPending so I can show the loading spinner, but I have struggled when I revalidateTag from outside the component that is receiving the new data from the page.tsx. In short please make a video about revalidatePath and revalidateTag with showing a spinner in client component. Thank you!!!!!!
My god, thank you! This whole time all I had to do was include suppressHydrationWarning... Why does it not mention that anywhere in the next docs or nextUI docs!?!?! Crazy! I spent hours trying to deal with that warning in the console!!!
Thanks. This is exactly what I was looking for!
thank you, I've been stuck on this for like 3 days
hey dave , amazing. video, just wanted to know how to control the css based on dark or light mode?
Nice video Dave, first time here and you helped me a lot!
Glad to hear it!
Thank you Boss for sharing this
Thank you so much for this, it really save from from a lot of stress
Glad it helped!
6:20 "Don't overuse it." _Proceeds to place it at the root 'html' element._
Thanks man concise and accurate!! well done
The problem i got with your example. "Expected server HTML to contain a matching in ." It appears only after theme change to non system and when i refresh the website. So far, I have not yet solved this problem. I think I have differences between what is displayed on the server side and what the client gets.
You can follow the linked article in the description to see the step-by-step code. I do not have this issue.
@@DaveGrayTeachesCode Thanks! Fixed :P
Thank you Gray for making these practical vedios 🌻
Hey Dave, great video. Question; Can you create a video about next.js metadata? In this video I saw you had a bunch so I'd be interested in best practices about it.
Great request! While I didn't create a video on the metadata, I do have several blog posts about metadata and SEO with Next.js here: www.davegray.codes/
Thank you Dave
Awesome video! Thank you!
Glad you liked it!
thanks man, helped a lot🙏
Subscribed. Thank you!
Welcome aboard!
Thanks for this great tutorial, but how to use this with MUI ?
Where have you used ThemeSwitch component ?
thank you mate, you are the best!
Thanks man!
Thanks Dave! I was stuck on it for a few days. Is there a way to create a hook or watch to update other components when the button is clicked? For example, I'd to switch logos in other components and render charts differently when the buttons is clicked
this is gold
Love it!
how do we set different theme to each multiple (dynamic) pages ex: category pages, or maybe random themes for each blogpost?
Wish there was a way to implement theming without Dynamic functions (cookies to be specific) to use SSG. Without cookies it will flicker on page change because server generated page is in default mode only. Only using separate routes for light and dark variant of generated pages comes to mind, but thats kinda hacky
nice
tnx
Sir if possible can you make video on how to add delay to API requests in NextJS ?
I think you are referring to debouncing. Adding a small delay before submitting an API request.
Yes, I have few components on a page which use swr, as soon as page loads lots of api calls are hit. I used axios interceptors with a random delay using setTimeout, but all are still fired at same time. I tried adding setTimeout in api route handlers still they all are fired at same time.
setTimeout was just, ({},random seconds).
*Thank you I watched your React Login Authentication with JWT Access, Refresh Tokens, Cookies and Axios video,* I did found a solution, i added a delay in Axios Request interceptor instead of middleware (it was skipping some request,) & also increased time. Also added console.logs to see timing of request, response, delay for each request. So now before calling API axios waits for a delay.
Awesome like always ❤
Better call saul 😎😎
Thank you again for a great video! I'm curious, you created a ThemeSwitch component and marked it as a client component, so this component will be render by client, but why do you have to use the useEffect hook to see if the component is mounted? Please enlighten me, I am new to the tech.
Short answer is hooks only run in the client (aka browser). Long answer is explained in detail here: ruclips.net/video/iA8JR8GgTKs/видео.html
putaquepariu... you are a God... I spent all day trying to do this with next and tailwind but all videos that I have wached, nothing worked... thank you... Hi form Brazil here
Glad I could help!
Thank you🙇
Thank you !!
Love it!
Is there a similar solution for someone using javaScript
Thanks for the class. next/image does not work after the page refresh
That's strange. It does work for me. You can verify here: davegray.codes Hard to guess what you might have different?
@@DaveGrayTeachesCode "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'."
It's not working after deploying on vercel. It's working fine locally. Please tell me what's going wrong?
No idea. I use this same approach on my blog that is deployed on Vercel and it works. Maybe you missed something? Here is a blog article that also walks you through step-by-step (and notice the light/dark mode on the blog): www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind
damn
damn
damn
thank you!!!!!!
To access environment variables in a Next.js application with Docker on the client side,
when i try to access in docker it give me undefined.. solution next js docker
how do you get this to work with storybook?
great video
Still flashes. Even in production. Using next-themes. Tailwindcss v3.4.1, Nextj canary.33 with PPR activated and in Turborepo....
You may have something different - for example, I don't know how Turborepo might impact this. That said, you can see it working in production and read about each step to implement it here: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..I use it on this site.
Any ideas how to use the system preferences? Google chrome's dark mode preference for example?
Yes, this identifies your system preference on the first load. If you do not use the dark/light toggle, it will continue to use the system preference instead of applying what it saves in localStorage.
@@DaveGrayTeachesCode Hey Dave, what if I want to provide a option to manually change to System preference? To do this should I remove whatever saved in localStorage?
It's not that hard to do it without 3rd party library. Seems like people just stopped developing and instead just looking for libraries that do the job. Most WEB dev tutorials these days are reduced to: "get this package, and here's what the docs say how to use it." Where are all the developers gone?"
Yeah. I was just wondering why we couldn't simply implement theming on our own using our dear ol' context api since next js has provided a working way to use it. The package itself is using useContext api under the hood from what I saw.
@@blaqhakym Can you please elaborate how to do it without using 3rd Party Library.
The thing is, everyone has already made it. Instead of reinventing the wheel, just use what someone else has made already.
@@blaqhakymso we are not developers then, we are just web organizers
I just don't want to spend too much time on things that I will touch once or twice during the whole lifetime of a project. That's why I used next theme
Hi Gray, it is working great, but with a slight issue during development. When I first start the server, the theme switcher component is never mounted until I do a refresh from my end. I am sure that you would have also encountered the same issue as well. Is there any way to fix this?
Hi I'm Dave. My last name is Gray. I have no issue. You may have missed a step. I also outline everything step by step in this blog article: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind
working only scroll bar. but why ?
I followed each step still resolvedTheme is undefined
I tried this, it didn't work for me, although the cursor changes between light and dark mode but my main screen doesn't change
Check if you missed anything small from this step-by-step article, too: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..btw, the same thing is implemented on that website.
@@DaveGrayTeachesCode went through it again, everything seems fine. in inspect, when i toggle the button, the html class attribute changes between dark and white
I want to add this functionality to my Navbar Like how to do that I have been able to make it go dark but like to switch it back how to do it using the navbar button can you help me with that
Yes, look at the ThemeSwitch component in my blog article here: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..it does exactly what you want. And my blog site has it deployed as well so you can test it on that page.
I wish to know like how have you implemented the same in the navbar like by default My website is able to take the darkmode but for that switching how do I implement it in the Navbar I want your help on that like can you share your code for the blog website so that I can look into it and get some insights
@@shivamjha8985 The code I share in the blog article is the exact code I use for my blog.
is that Brad pitt of the programingwood ? lol
Dante ?
I have tried it and when changing themes and refreshing the browser it still Flickers
As noted in the video, it might in dev mode but it won't in production. Check if you missed anything small from this step-by-step article, too: www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind ..btw, the same thing is implemented on that website.
@@DaveGrayTeachesCode okay thanks, it works
Thanks, Kurt Cobain!
A denial, a denial, a denial... 😀
Gray, hi. It is not best way. R u know about state managment valtio? With valtio u will save to state dark or light and change it in nav or anywhere.
export const store = proxy({
mode: 'light'
})
This code from nav:
…
const { mode } = useSnapshot(store)
…
(store.mode = mode === 'dark' ? 'light' : 'dark')}/>
…
It is difficult to say any one specific way is "the best". Please do share a link to a reference. I explain the difficulty with client side state vs what the server renders in this video. I hope your solution also addresses this issue. I compared dependency size as well. Valtio is 10x larger. You would definitely want to be using it for more than just this if you choose this solution. I have not confirmed that it will prevent a flicker or not.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const mode: "dark" | "light" = useSnapshot(store).mode;
return (
{children}
);
}
@DaveGrayTeachesCode please try valtio first, then you will like it. and this method is very short and solves your problem on the server and in the client. I thought your subscribers would also want to know about this method. I don't mean any harm, I grew up with you in your channel and I wanted to share my experience with you.
NICE :)
Im not using next-themes anymore.
Why?
1. next-themes outdate (looks like deprecade)
2. Not support cookies.
Build darkmode with next js app DIR not difficult. Just use cookies and middleware
next-themes has not updated their npmjs.com page, but they have updated their GitHub ReadMe page which is linked in this video description. There is a section on App Router support. It is not deprecated. Cookies aren't needed for this. I show how it works with localStorage and prevents the flash/flicker. I'm sure there are other solutions and yours may be a good one. If you have a link, please share. That said, no need to say another solution is not worthwhile. It has been noted as a difficult problem to solve as you can see here: github.com/vercel/next.js/discussions/53063
@@DaveGrayTeachesCode Why my reply disappear?
I have no idea. Sometimes RUclips flags messages. I do not manually have time to even check most of them.
@@DaveGrayTeachesCode yeah, im reply why im using cookies for darkmode and some link how to do that
@@DaveGrayTeachesCode for example not-found page. This is serverside and not accept any props. I need to know what current active themes. So i can render different svg image. This is why i need cookies instead of localstorage
Video feed of your face is very distracting. Your courses were much more immersive with just the voiceover.
well......F.Y.....