How to use material UI with nextjs?

Nextjs

How to use material UI with nextjs and react 18

Material UI is a great UI library for a front-end developer. With the easy ways to add material UI in nextjs

The material UI is an excellent library for front-end developers. You can add material UI in nextjs with three easy steps. All the steps come with copy-paste code and don't vary about it.

Demo

javaScript

https://github.com/officialrajdeepsingh/material-ui-demo

TypeScript

https://github.com/officialrajdeepsingh/material-ui-demo

Steps

1. Install material UI library.
2. Update _app.js file
3. Create two files for basic configuration.

Install material UI library.

In the first step, you install the material UI and help library packages using one package mangar npm, yarn, and pnpm.

npm install @mui/material @emotion/react @emotion/styled
or
yarn add @mui/material @emotion/react @emotion/styled
or 
pnpm add @mui/material @emotion/react @emotion/styled

After the successful installation, the following package is in your package. Then go to the next step.

If you use the SVG icon in your material UI. I also suggest installing a material UI icon in your project.

npm install @mui/icons-material
or
yarn add @mui/icons-material
or
pnpm add @mui/icons-material

Update _app.js file

In the next step, you create pages/_app.js file in your nextjs pages folder. If the _app.js file is already present, the nextjs pages folder. Then paste the following code into your _app.js file.

in the _app.jsfile, you handle all cache, style, and layout functionality in _app.js file.

TypeScript

For typescript _app.tsx configuration

javaScript

configuration for javascript

Create two files for basic configuration.

In this last following step, you create two files for configuration. The first file contains the material UI theme configuration, and the second includes the @emotion/cache configuration.

theme configuration

You create a file inconfig/theme.tsx in your root level. The theme configuration file describes your material UI theme global configuration.

import { createTheme } from '@mui/material/styles';
import { red } from '@mui/material/colors';
// Create a theme instance.
const theme = createTheme({
palette: {
   primary: {
      main: '#556cd6',
   },
   secondary: {
     main: '#19857b',
   },
   error: {
   main: red.A400,
   },
  },
});
export default theme;

@emotion/cache configuration.

The second config/createEmotionCache.tsx file created is in your root level. The config/createEmotionCache.tsx file handles all material UI-related cache in your nextjs app.

import createCache from '@emotion/cache';

export default function createEmotionCache() {
   return createCache({ key: 'css', prepend: true });
}

Pro tip

Always use material UI with nextjs. Then make sure in your project the nextjs _document.js file is available.

References

1. https://mui.com/material-ui/getting-started/overview/
2. https://www.npmjs.com/package/@emotion/react
3. https://www.npmjs.com/package/@emotion/styled

Conclusion

I hope my article solves your problem. In this article, I do not describe the theory part. I will tell you only the coding region.

If you inserted to learn more about everything related to pasting code in _app.js file. Then check out the references.

You can follow and read more articles on officialrajdeepsingh.dev and tag them on Twitter.

Read More content on the Nextjs. Sign up for a free newsletter and join the nextjs community on medium.