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!




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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Parser + Actions + Reducers. Lazy Jar — Part #1

Announcing React India 2019 Speakers

Getting Started With Kotlin-React

Introducing List Comprehension for TypeScript

Understand JavaScript Execution Context.

Swift to React Native — week 1

Enabling cross-origin communication between Window objects

ES6 Tips & Tricks

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

Juan Miguel Rúa Gutiérrez

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

More from Medium

Deploying a React.js app on Netlify

How To Setup React App With Vite & Tailwind Support

Build survey app using NextJs & SurveyJS

Next.js -The next big thing