Super Charge your Next.js Development with UI Frameworks like Chakra UI
A common pattern that is used in development is to use a UI framework to handle styling for the components that you build. This super charges your feature development and can allow you to iterate faster at a higher quality.
For many of these frameworks, you will need to do some set up. This lesson takes you through the set up of Chakra UI in Next.js. You’ll find that you will need to adjust your _app and document files to get started with UI frameworks in Next.js. In this lesson, we will get Chakra set up as well as provide our app with an initial color scheme.
Lazar Nikolov: [0:01] In lesson number nine, we learned how to create a new CSS files or custom styles. Most of the developers use UI frameworks to make their lives easier. Using a UI framework like Chakra UI, in combination with Next.js, will supercharge your feature development and make the styling of your app even easier.
[0:20] Frameworks like Chakra UI, utilize the React Context API to configure your web app's theme, and ensure consistent styles. As we mentioned in lesson number seven, we can overwrite the app component to persist layout between page changes and inject additional data into our pages.
[0:38] That's where we can add the Chakra provider. Chakra UI also comes with a ColorModeScript, specifically built for Next.js that we need to put in our custom document, which we learned how to overwrite in lesson number eight.
[0:51] Let's check out our project. Let's open exercise number 11. Let's open the pages directory, and open index.tsx.
[1:01] To make things simple, I've already included a prebuilt interface built with Chakra UI, so we can go through the installation process without having to write any UI code. I've also included a theme.ts file, that uses the extent theme method from Chakra UI to set the initial color mode to light and disable the system color mode.
[1:22] Let's begin. If we open up Chakra UI's website and click on the Get Started button, we can see that there is already a guide for Next.js. Let's select that. What we need to do is copy the installation script. This installs Chakra UI, and all of its dependencies.
[1:39] Let's go back to our project and execute that installation script. We'll let this run in the background. As we mentioned previously, to set up Chakra UI, you need to set two things, the Chakra provider and the ColorModeScript.
[1:53] Let's set up the Chakra provider first. We'll open the app.tsx and import the Chakra provider first. We'll do import Chakra provider from Chakra UI/React.
[2:06] While we're here, let's also import our theme, from our theme.ts file. To set up Chakra UI, we need to wrap our component with the Chakra provider.
[2:23] Let's also not forget to set the theme in the theme prop. That's it. Let's run npm run dev and see it in action. There we go. We can see that this page has its own custom styles. To finish the Chakra UI installation, let's not forget to add the ColorModeScript. Let's open the document.
[2:48] First import the ColorModeScript. We'll do import ColorModeScript from Chakra-UI/React. Because it needs our theme, we can also import our theme while we're here. Import theme from theme. Now, above the main script, we can add our ColorModeScript.
[3:10] To hook up the initial color mode, we need to set the initial color mode prop to theme.config.initialColorMode. That's it. Let's just restart our server. We'll run npm run dev again, and ensure that everything is OK.
[3:33] Nice, there we go.
[3:36] Let's recap. We learned how one UI framework in this case Chakra UI integrates with Next.js. We learned how to set up the Chakra provider within our app component, and also how to set up the ColorModeScript within our custom document.
[3:54] Most of the UI frameworks like Chakra UI, require you to modify the app and document files to set up their contexts and their additional scripts.