---
title: "Material UI and Next.js - Air Market"
description: "You are building a Next.js app and want to use Material UI components in it, but the two need some setup to work together. This gives you guidance for that setup, whichever of the two Next.js routing…"
canonical: "https://airmarket.ai/app/material-ui-nextjs"
---

[Air Market](/) / [Developer Tools](/category/devtools) / Material UI and Next.js

Skill by [MUI](/@mui)

# Material UI and Next.js

Get Material UI working properly inside your Next.js app

## What this does

You are building a Next.js app and want to use Material UI components in it, but the two need some setup to work together. This gives you guidance for that setup, whichever of the two Next.js routing styles your app uses. Reach for it when you are adding Material UI to a Next.js project.

### Top 3 things it does for you

- Set up MUI in a new Next.js project
- Fix MUI styling that breaks in Next.js
- Make MUI links work with Next.js routing

## Information

**Material UI and Next.js at a glance**

|  |  |
| --- | --- |
| Kind | Skill |
| Publisher | [MUI](/@mui) |
| Category | [Developer Tools](/category/devtools) |
| Works with | Agent Skills - an open standard supported by 40+ agents |
| Version | 1.0.0 |
| Size | 13 KB |
| Licence | MIT |
| Repository | [mui/material-ui](https://github.com/mui/material-ui/tree/3078e63a7d86b761b0d87ff0db462a3a360c4a2f/skills/material-ui-nextjs) |
| GitHub stars | 99,304 (as of Nov 2026) |
| Installs | 769, counted by skills.sh (Nov 2026) |

## Security report

**Verified.** AIR scanned this exact version of Material UI and Next.js and flagged nothing. AIR's verdict: **safe**.

**What Material UI and Next.js's check was run against**

|  |  |
| --- | --- |
| Commit | 3078e63a7d86b761b0d87ff0db462a3a360c4a2f |
| Content hash | 735234a4ca4ae9bd03215e422838fded7299ded976fdb4aa12b99d66d14d047e |
| Files read | [Browse the files at this exact commit](https://github.com/mui/material-ui/blob/3078e63a7d86b761b0d87ff0db462a3a360c4a2f/skills/material-ui-nextjs/SKILL.md) |

A scan is named by the exact content it read, not by a version number. A different version is a different artifact, and nothing here applies to a version AIR has not scanned.

[Read the full security report for Material UI and Next.js](/security/material-ui-nextjs)

## About Material UI and Next.js

Helps you integrate Material UI with Next.js, for both the App Router and the Pages Router, using @mui/material-nextjs and Emotion cache providers.

It covers next/font, CSS layers when you also use Tailwind or CSS Modules, patterns for passing the Link component as a prop, notes on CSS theme variables with server rendering, and using useSearchParams with Suspense in the App Router.

Use it when setting up or debugging MUI in a Next.js app.

## What's inside

- SKILL.md - instructions
- AGENTS.md - reference
- metadata.json - data
- README.md - reference
- reference.md - reference

## Questions

### Is Material UI and Next.js safe to install?

AIR scanned this exact version of Material UI and Next.js and flagged nothing. AIR's verdict: safe. The verdict is named by the content that was read, at commit 3078e63a7d86, so it cannot drift onto a version nobody scanned. The full report is at https://airmarket.ai/security/material-ui-nextjs.

### How do I install Material UI and Next.js?

Open https://airmarket.ai/app/material-ui-nextjs on Air Market and use the install action: Air Market hands Claude a prompt naming this exact skill, and Claude sets it up. Source, pinned to the exact commit this listing describes: https://github.com/mui/material-ui/tree/3078e63a7d86b761b0d87ff0db462a3a360c4a2f/skills/material-ui-nextjs. Install from that link, not the branch.

## Related on Air Market

- [More Developer Tools listings](/category/devtools)
- [Everything by MUI](/@mui)

---

Canonical URL: <https://airmarket.ai/app/material-ui-nextjs>