In this video, we'll look at adding a dark/light theme to NextJs 13 using the `next-themes` package. We'll also learn how to use React context in Server components.
UPDATE: Manually adding the `class` and `style` attributes might not resolve the hydration mismatch problem in some cases. I've updated the source code to use the `suppressHydrationWarning` prop from React instead.
👉🏼 The Ultimate NextJs Course
🔗 www.hamedbahram.io/courses/ne...
👉🏼 Source code (Github)
🔗 github.com/HamedBahram/next-s...
👉🏼 next-themes package
🔗 www.npmjs.com/package/next-th...
Chapters
0:00 Intro
0:20 Project setup
3:00 Adding next-themes
4:00 Using React context
6:15 Adding a header
8:00 Using Tailwind dark variant
11:00 Adding Theme toggle button
13:20 Adding HeroIcons
14:20 Resolve hydration mismatch
15:30 Resolve extra attribute warning
18:52 Outro
Негізгі бет Dark Theme in NextJs 13 - Using React Context in Server Components
Пікірлер: 155