编辑“︁Next.js Material UI 集成”︁

= Next.js Material UI 集成 =

Material UI（MUI）是一个流行的 React UI 组件库，基于 Google 的 Material Design 设计语言。在 Next.js 中集成 Material UI 可以快速构建美观、响应式的用户界面。本章将详细介绍如何在 Next.js 项目中配置和使用 Material UI，包括主题定制、服务器端渲染（SSR）支持以及性能优化。

== 介绍 ==
Material UI 提供了丰富的预制组件（如按钮、卡片、表单控件等），并支持深度自定义主题。在 Next.js 中使用时，需特别注意 SSR 兼容性和样式加载顺序问题。以下是核心集成步骤：

1. 安装依赖包
2. 配置主题和样式引擎
3. 优化 SSR 支持
4. 使用组件

== 安装与基础配置 ==
首先安装 Material UI 核心库和依赖：

<syntaxhighlight lang="bash">
npm install @mui/material @emotion/react @emotion/styled
</syntaxhighlight>

创建主题配置文件 `src/theme.js`：

<syntaxhighlight lang="javascript">
import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
    secondary: {
      main: '#dc004e',
    },
  },
});

export default theme;
</syntaxhighlight>

== 服务器端渲染配置 ==
Next.js 需要特殊处理以避免 SSR 时的样式闪烁。创建 `pages/_document.js`：

<syntaxhighlight lang="javascript">
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import createCache from '@emotion/cache';

const getCache = () => {
  const cache = createCache({ key: 'css' });
  cache.compat = true;
  return cache;
};

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const originalRenderPage = ctx.renderPage;
    const { extractCriticalToChunks } = createEmotionServer(getCache());

    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: (App) => (props) => <App emotionCache={getCache()} {...props} />,
      });

    const initialProps = await Document.getInitialProps(ctx);
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) => (
      <style
        data-emotion={`${style.key} ${style.ids.join(' ')}`}
        key={style.key}
        dangerouslySetInnerHTML={{ __html: style.css }}
      />
    ));

    return {
      ...initialProps,
      styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
    };
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content="#1976d2" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}
</syntaxhighlight>

== 主题提供器设置 ==
在 `pages/_app.js` 中包裹主题提供器：

<syntaxhighlight lang="javascript">
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import theme from '../src/theme';

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;
</syntaxhighlight>

== 组件使用示例 ==
创建一个带 Material UI 按钮的页面：

<syntaxhighlight lang="javascript">
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';

export default function HomePage() {
  return (
    <Stack spacing={2} direction="row">
      <Button variant="contained">Primary</Button>
      <Button variant="outlined" color="secondary">
        Secondary
      </Button>
    </Stack>
  );
}
</syntaxhighlight>

== 主题定制进阶 ==
Material UI 支持通过 TypeScript 增强主题类型。创建 `src/theme.d.ts`：

<syntaxhighlight lang="typescript">
import { Theme } from '@mui/material/styles';

declare module '@mui/styles/defaultTheme' {
  interface DefaultTheme extends Theme {}
}
</syntaxhighlight>

添加自定义主题变量：

<syntaxhighlight lang="javascript">
const theme = createTheme({
  custom: {
    borderWidth: '2px',
  },
});
</syntaxhighlight>

== 性能优化 ==
1. **按需加载**：使用 `next/dynamic` 延迟加载复杂组件
2. **Tree Shaking**：确保只导入需要的组件
3. **CSS 压缩**：通过 PostCSS 优化产出

<mermaid>
graph TD
  A[页面请求] --> B{是否首次加载?}
  B -->|是| C[加载关键CSS]
  B -->|否| D[从缓存加载]
  C --> E[渲染组件]
  D --> E
</mermaid>

== 常见问题解决 ==
'''样式闪烁'''
* 原因：客户端/服务端样式不匹配
* 解决方案：确保 `_document.js` 正确配置

'''主题不生效'''
* 检查 `<ThemeProvider>` 是否包裹在组件最外层
* 验证 `theme.js` 是否正确导入

== 实际应用案例 ==
'''电商网站产品卡片'''
<syntaxhighlight lang="javascript">
import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';
import Typography from '@mui/material/Typography';

function ProductCard({ title, image, price }) {
  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia component="img" height="140" image={image} />
      <Typography gutterBottom variant="h5">
        {title}
      </Typography>
      <Typography color="text.secondary">
        ${price}
      </Typography>
    </Card>
  );
}
</syntaxhighlight>

== 数学公式示例（可选） ==
Material UI 间距系统使用 8px 基准：
<math>spacing = 8 \times n</math>
其中 n 为乘数因子

== 总结 ==
Next.js 与 Material UI 的集成需要：
1. 正确配置 SSR 支持
2. 合理组织主题结构
3. 遵循性能最佳实践
4. 利用 TypeScript 增强开发体验

通过本章学习，开发者应能构建风格统一且高性能的 Next.js 应用界面。

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js样式解决方案]]