Configure Material-UI into your Next.js project

Photo by Kieran Wood on Unsplash

As I posted previously, I’ve started a trip to learn a little more about the Next.js framework using it to build my personal webpage as an SSR application. In this post, I’ll talk about how to configure a Next.js project to use Material-UI.

But first of all, what is Material-UI?. Material-UI is one of the most-known React UI framework that implements Google’s Material design pattern. The official documentation is perfectly organized and, there is a bunch of posts (like this) that will give you a better explanation about what Material-UI is. At least better than me for sure.

Well, let’s go straight to the point. To use Material-UI in your Next.JS project, you need to install Material-UI:

npm i --save @material-ui/core

Then, you have to customize to ‘Document’ creating the file`pages/_document.js`:

This gist is a copy from the official Material-UI’s repository

And that’s all!. Now you can structure your webpage using the Material-UI’s Grid, shape your React components with Papers and Cards, create forms with Buttons and Fields and come up with an AppBar with Material-icons inside.

Happy coding!