In this lesson, we will learn how to set up and use Chakra UI with Next.js.
We'll use Chakra UI to customize the way Next.js styles every page in our application by defining a
_app.tsx file. We'll wrap our app in the
ThemeProvider that Chakra gives us as well as use
CSSReset to reset the default browser styling.
After this initial set up, you'll see how easy it is to start styling pages with Chakra by using components like
Flex exposed from the core package.
As of Chakra v1, for those who might face issue with setup - I had some issue with the emotion/chakra v1 as the core package is no more compatible and instead follow this upgrade doc for installation: https://chakra-ui.com/docs/migration
ThemeProvider needs to be
framer-motion is required as dependency as well.