How to use Material UI v5 with NextJs – Full tutorial

Material UI is a CSS framework that is based on Google’s material design. It provides various ready-to-use components that we can use in our NextJs applications. In this article, we’ll learn how to use Material UI with NextJs while maintaining the default UI components of NextJs like pages, routes, and navigation.

What is Material UI?

Material UI (MUI) is a CSS framework that Google developed for its popular Angular Framework. Its primary use is to provide components for rapid web development.

Material UI is an Open Source library that makes it easy to build beautiful, responsive web apps. It is built with the same design language as Google’s material design system. It gives you the tools to build high-quality products using modern JavaScript and CSS techniques quickly.

What is NextJs?

NextJs is a library that you can use to write server-side rendered apps in React. It provides a standard way of handling routing and page components so that you don’t have to write all the boilerplate code yourself. Next is a way of creating web applications in React that doesn’t require any build steps. It uses server-side rendering to generate HTML from your components.

How to integrate Material UI with NextJs?

Before we begin, here is the GitHub link to the tutorial.

Now let’s learn how to use Material UI with NextJs, how to customize the theme, and more.

First, set up a NextJs project.

• Create a new next app with this command.

npx create-next-app@latest
# or
yarn create next-app
Code language: CSS (css)

• In the prompt, give your app a nice name.
• After installation, your folder structure will look like this.

.
├── README.md
├── next.config.js
├── package.json
├── pages
│   ├── _app.js
│   ├── api
│   │   └── hello.js
│   └── index.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── yarn.lock
Code language: Basic (basic)

Next up, install material UI.

• Run this command to install material UI dependencies.

npm install @mui/material @emotion/react @emotion/styled
# or
yarn add @mui/material @emotion/react @emotion/styled
Code language: JavaScript (javascript)

Theming in NextJs

We have completed the project setup and installation of the material UI. However, if you use the material UI components in your application, the default styles will be used. But if you want to use your own styles like colors, typography, spacing, and more, you can do so by customizing the MUI theme.

To do this, the material UI has a ThemeProvider component. Let’s use this ThemeProvider component to customize our theme.

• In the styles folder create a folder called theme.

.
├── styles
│   ├── Home.module.css
│   ├── globals.css
│   └── theme
Code language: Basic (basic)

• In that folder, create a file called index.js.

.
├── styles
│   ├── Home.module.css
│   ├── globals.css
│   └── theme
│       └── index.js
Code language: Basic (basic)

• Import the createTheme component from material styles.

// index.js

import { createTheme } from '@mui/material/styles';
Code language: JavaScript (javascript)

• Let’s say we want to change the color palette of our application.

const theme = createTheme({
    palette: {
        primary: {
            main: '#e2765a'
        }
    }
});
Code language: JavaScript (javascript)

• Export the theme. The final index.js file looks like this.

// index.js

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
    palette: {
        primary: {
            main: '#e2765a'
        }
    }
});

export default theme;
Code language: JavaScript (javascript)

• Wrap the whole application with the ThemeProvider component and pass them theme to the theme prop. To do so, open the _app.js file located in the pages/ folder because this is the starting point of the application.

import { ThemeProvider } from "@mui/material";
import "../styles/globals.css";
import theme from "../styles/theme";

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;
Code language: JavaScript (javascript)

• After that, you can use those custom styles in your application like this.

 <Button color="primary">Submit</Button>
Code language: JavaScript (javascript)

That’s it! You can explore more advanced configurations in mui documentation.
I hope you find this article helpful.

Conclusion

With the recent release of Material UI v5 and NextJs, it’s easier than ever to put together and customize a great website. These two go hand in hand; NextJs makes it easy to build a framework that is fast, scalable, and secure. Material UI gives you access to all of Google’s material design components (over 500 elements) and loads of features that help you bring your interface to life.

In this article, we’ve learned how to use Material UI v5 with NextJs. NextJs is a great framework to build blogs and sites implemented in React, and the integration with Material UI is also great. I’m sure you’ll have fun with Material UI in your next project.