material-ui-nextjs

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Material UI and Next.js

Material UI 与 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.

用于Next.js + Material UI集成（SSR/流式渲染、缓存提供器、字体、样式层、Link、App Router URL状态）的Agent技能。SKILL.md为入口文件；AGENTS.md为完整指南。

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 errors
```
useSearchParams
```
/ URL-driven MUI views and Suspense boundaries

使用
```
@mui/material
```
的全新App Router或Pages Router应用
样式缺失、顺序错误，或样式出现在
```
body
```
而非
```
head
```
中
```
next/font
```
+
```
ThemeProvider
```
/
```
createTheme
```
组合使用
Tailwind或CSS Modules + MUI（需启用
```
enableCssLayer
```
）
```
Button
```
+
```
component={Link}
```
组合使用，或Next.js v16客户端边界错误
```
useSearchParams
```
/ URL驱动的MUI视图及Suspense边界

Sections in AGENTS.md

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

领域	主题
App Router	`AppRouterCacheProvider` , `@emotion/cache` , `options` , `useSearchParams` + `<Suspense>`
Pages Router	`_document` , `_app` , `DocumentHeadTags` , `AppCacheProvider`
字体	`'use client'` 主题, `next/font` , `html` 上的CSS变量
CSS变量	`cssVariables` , SSR闪烁相关文档
CSS层	`enableCssLayer` , Tailwind / 其他CSS
Link	客户端包装器、路由指南、示例仓库

Full guide

完整指南

Read AGENTS.md for complete steps and doc links.

reference.md lists import paths and provider shape.

阅读AGENTS.md获取完整步骤及文档链接。

reference.md列出了导入路径和提供器结构。