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:

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!



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Miguel Rúa Gutiérrez

#Tech #SoftwareArchitect #DevOps #AWS #Terraform #SoftwareDevelopment #Python #Nodejs #Entrepreneurship