Nextjs
Published in

Nextjs

How to use material UI with nextjs?
How to use material UI with nextjs?

How to use material UI with nextjs and react 18

Material UI is a great UI library for a frontend developer. with the easy ways to add material UI in nextjs

The material UI is an excellent library for frontend 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.

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

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

npm install @mui/material @emotion/react @emotion/styledoryarn add @mui/material @emotion/react @emotion/styledor 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-materialoryarn add @mui/icons-materialorpnpm add @mui/icons-material

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.

For typescript _app.tsx configuration
configuration for javascript

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.

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;

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 });}

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

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.

--

--

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