| name | material-ui-nextjs |
| description | Integrates Material UI with Next.js App and Pages routers using @mui/material-nextjs, Emotion cache providers, next/font, CSS layers with Tailwind/CSS Modules, Link component prop patterns, CSS theme variables SSR notes, and App Router useSearchParams + Suspense. Use when setting up or debugging MUI in a Next.js app. |
| license | MIT |
| metadata | {"author":"mui","version":"1.0.0"} |
Material UI and Next.js
Agent skill for Next.js + Material UI wiring (SSR/streaming, cache providers, fonts, layers, Link, App Router URL state). SKILL.md is the entry; AGENTS.md is the full guide.
When to apply
- New App Router or Pages Router app using
@mui/material
- Styles missing, wrong order, or in
body instead of head
next/font + ThemeProvider / createTheme- Tailwind or CSS Modules + MUI (
enableCssLayer)
Button + component={Link} or Next.js v16 client boundary errorsuseSearchParams / URL-driven MUI views and Suspense boundaries
Sections in AGENTS.md
| Area | Topics |
|---|
| App Router | AppRouterCacheProvider, @emotion/cache, options, useSearchParams + <Suspense> |
| Pages Router | _document, _app, DocumentHeadTags, AppCacheProvider |
| Fonts | 'use client' theme, next/font, CSS variables on html |
| CSS variables | cssVariables, SSR flicker docs |
| CSS layers | enableCssLayer, Tailwind / other CSS |
| Link | Client wrapper, routing guide, examples repo |
Full guide
Read AGENTS.md for complete steps and doc links.
reference.md lists import paths and provider shape.
