Integrating Chakra UI in Next.js

Chakra UI is an open source component library used for building modular, accessible, and good-looking user interfaces.

Its main strengths are the following:

• Accessibility: Chakra UI allows us to use pre-built components (such as buttons, modals, inputs, and many more) created by the Chakra UI team with extra attention to accessibility.
• Themeable: The library ships with a default theme, where (for instance) buttons have a particular default background color, border radius, padding, and so on. We can always customize the default theme using Chakra UI built-in functions for editing every style of the library components.
• Light and dark mode: They're both supported out of the box and can rely on the user's system settings. If users set their computer to use dark mode by default, Chakra UI will load the dark theme as soon as it loads.
• Composability: We can create more and more components starting from the Chakra UI ones. The...