React：Next，MUI 集成

在使用 React、Material-UI (MUI) 和 Next.js 进行开发时，通常需要集成一些必要的组件和库来构建一个现代化的 Web 应用。以下是一个基本的集成指南，帮助你快速上手。

1. 创建 Next.js 项目

首先，使用 create-next-app 创建一个新的 Next.js 项目：

npx create-next-app@latest my-next-app
cd my-next-app

2. 安装 Material-UI (MUI)

接下来，安装 Material-UI 的核心库和相关的依赖：

yarn add @mui/material @emotion/react @emotion/styled  @emotion/server

如果你需要使用 Material-UI 的图标，可以安装图标库：

yarn add @mui/icons-material

3. 配置 MUI 与 Next.js 的兼容性

为了确保 MUI 在 Next.js 中正常工作，需要进行一些配置。首先，创建一个 _document.js 文件来定制 Next.js 的文档结构。

在 pages/_document.js 中添加以下内容：

import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import createCache from '@emotion/cache';

function createEmotionCache() {
  return createCache({ key: 'css', prepend: true });
}

export default class MyDocument extends Document {
  render() {
    return (
      
        
          {/* PWA primary color */}
          
          
        
        
          

          
        
      
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const originalRenderPage = ctx.renderPage;
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

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

  const initialProps = await Document.getInitialProps(ctx);
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (