如何将MUI的_document.js和_app.js迁移至Next.js13的app/layout.js？代码求检查

你找到的是Next.js Pages Router下的MUI配置文件，而Next.js13 App Router的app/layout.js逻辑有不少差异，你的代码存在几个关键问题，以下是具体修正点和优化建议：

核心问题修正 #

• 参数结构错误：App Router中，RootLayout仅接收children作为参数，Component、pageProps是Pages Router里_app.js的写法，在App Router的布局中完全不需要，直接渲染传入的children即可。
• PropTypes定义错误：对应参数结构，RootLayout的PropTypes只需要声明children，原代码里的Component、emotionCache、pageProps都是无效的，应该删除或修正。
• Emotion缓存的服务端适配：为确保服务端渲染(SSR)的样式一致性，需要区分服务端和客户端的Emotion缓存，避免样式 hydration 不匹配。
• HTML标签的语言属性：建议给<html>标签添加lang属性，符合网页 accessibility 最佳实践。

修正后的完整代码 #

import React from 'react'
import PropTypes from 'prop-types'
import { ThemeProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'
import { CacheProvider } from '@emotion/react'
import theme, { roboto } from '../utility/theme'
import Head from './Head'
import createEmotionCache from '../utility/createEmotionCache'

// 创建服务端缓存（仅在服务端执行）
const serverSideEmotionCache = createEmotionCache()

export default function RootLayout({ children }) {
  // 客户端使用默认缓存，服务端使用创建的缓存
  const cache = typeof window === 'undefined' ? serverSideEmotionCache : createEmotionCache()

  return (
    <html lang="zh-CN" className={roboto.className}>
      <Head />
      <body>
        <CacheProvider value={cache}>
          <ThemeProvider theme={theme}>
            <CssBaseline />
            {children}
          </ThemeProvider>
        </CacheProvider>
      </body>
    </html>
  )
}

RootLayout.propTypes = {
  children: PropTypes.node.isRequired,
}

额外优化提示 #

• 如果你的Head组件是自定义的，建议迁移到Next.js13的Metadata API（通过export const metadata声明页面元数据），这是App Router的推荐方案。
• 确保createEmotionCache函数的配置正确，尤其是key值（通常设为mui），避免样式冲突。

内容的提问来源于stack exchange，提问作者Yedidya