In this video, we code a personal website and blog using the next.js JavaScript framework and the Chakra-UI css framework. We override and create a custom theme, add a dark mode, create and modify _app.js and _document.js, and set up the index.js page for the rest of the videos. Be sure to watch part 2 where we finish off the remainder of this video.

Chakra-UI version: V1
Next.JS version: 10

Next Video: https://youtu.be/G6_qqMrfTQg

Code: https://github.com/bjcarlson42/personal-website-nextjs-chakra

(0:00) Introduction
(0:27) Creating a next.js app
(2:18) Adding Chakra-UI
(4:13) Extending the custom theme - 1
(7:36) Adding Inter google font and _document.js
(9:36) Extending the custom theme - 2
(12:25) Using custom theme in _app.js + customizing color mode by using user’s default preference
(14:46) Creating DarkModeSwitch component
(17:03) Creating the Container component

#chakra

#chakra #next #next js #chakra