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.
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 ❤.
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!!!
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!!!!!!
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.
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
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
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.
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
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
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
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, 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.
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
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
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
@@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'."
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.
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 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
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.
The "Add provider to your layout" perfectly explains a very confusing part of SSR. Well done 👏👏👏
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!
Thanks, this video helped me implement dark mode in my portfolio within 2-3 minutes.
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 ❤.
You make it look so easy. Thank you for explaining the theme switcher so well.
thank you!! this video really helped me to implement theme switching in Next.js without any flicker
Glad it helped!
Thanks. This is exactly what I was looking for!
from your videos everything is soo easy sir
Thanks man, I implement that with localstorage but that flash was driving me insane, you save my sanity 😂
Nice video Dave, first time here and you helped me a lot!
Glad to hear it!
thank you, I've been stuck on this for like 3 days
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!!!
Thank you so much for this, it really save from from a lot of stress
Glad it helped!
Thank you Boss for sharing this
Thanks man concise and accurate!! well done
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!!!!!!
Love it!
hey dave , amazing. video, just wanted to know how to control the css based on dark or light mode?
Thank you Gray for making these practical vedios 🌻
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!
Subscribed. Thank you!
Welcome aboard!
Awesome video! Thank you!
Glad you liked it!
Awesome like always ❤
thanks man, helped a lot🙏
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
Thank you Dave
Thanks man!
Love it!
thank you mate, you are the best!
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
Where have you used ThemeSwitch component ?
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/
this is gold
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
Thank you !!
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: ua-cam.com/video/iA8JR8GgTKs/v-deo.html
Thank you🙇
how do we set different theme to each multiple (dynamic) pages ex: category pages, or maybe random themes for each blogpost?
6:20 "Don't overuse it." _Proceeds to place it at the root 'html' element._
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
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
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!
Thanks for this great tutorial, but how to use this with MUI ?
nice
tnx
Is there a similar solution for someone using javaScript
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.
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.
great video
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
damn
damn
damn
thank you!!!!!!
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
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
working only scroll bar. but why ?
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.
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'."
I followed each step still resolvedTheme is undefined
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
Better call saul 😎😎
how do you get this to work with storybook?
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?
Dante ?
NICE :)
is that Brad pitt of the programingwood ? lol
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.
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 UA-cam 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.....