Using Material-UI with Next.js

Last Updated : 11 Mar, 2026

Material-UI (MUI) is a popular React UI framework that provides ready-made components following Google’s Material Design. It integrates well with Next.js to build responsive, modern web interfaces quickly.

Provides pre-built UI components like buttons, cards, dialogs, and navigation bars.
Works smoothly with Next.js SSR (Server-Side Rendering) for better performance and SEO.
Supports custom themes and styling to easily design consistent user interfaces.

Approach

To use the Material-UI with Next.js

Wrap the entire application with ThemeProvider to apply consistent theming across all components.
Use Material-UI components in Next.js pages to build responsive and modern user interfaces.
Ensure server-side rendering support using Emotion styling for optimized performance and consistent styling.

First Let's start by creating a Next.js project.

Steps to Integrate Material UI with Next.js

Step 1: Initialize a nwe Next.js project using the following command:

npx create-next-app gfg-next-mui

Step 2: Move to the Project directory

cd gfg-next-mui

Step 3: Install Material-UI

To install the dependencies and save them in your package.json file, run:

npm install @mui/material @emotion/react @emotion/styled @emotion/server

Project Structure

It will look like this.

👁 Project Structure

The updated dependencies in the package.json file are:

"dependencies": {
 "@emotion/react": "^11.13.0",
 "@emotion/server": "^11.11.0",
 "@emotion/styled": "^11.13.0",
 "@mui/material": "^5.16.5",
 "next": "14.2.4",
 "react": "^18",
 "react-dom": "^18"
}

Step 4: Modify the _document.js file. Configure the next app for server-side rendering using the Material UI and emotion library.

Step 5: Define Material-UI theme with custom primary, secondary, and error colors using createTheme from @mui/material/styles.

Create an src folder, add theme.js and createEmotionCache.js files as below

Step 5: Update the file /pages/_app.js with the below code

Step 6: Update the Home Component in /pages/index.js with the below code.

Steps to run the application: To run the app, type the following command in the terminal.