如何在Next.js实验性新app/目录中配置Material UI？并咨询_app.ts/_document.ts的等效文件

我完全懂你在Next.js新的app目录里配置Material UI时遇到的困扰——官方的material-next-ts示例是基于旧的Pages Router做的，直接套用到新的App Router上肯定会踩坑，咱们一步步理清问题：

关于_app.ts/_document.ts的等效文件 #

在新的App Router架构里，旧的两个核心文件被合并/替换了：

• 旧的_app.tsx（负责全局应用包装、全局Provider注入、全局样式初始化）：等效于app目录下的layout.tsx根布局文件。所有路由都会继承这个根布局，你可以在这里完成全局ThemeProvider、CssBaseline等组件的注入，和之前在_app里做的事完全对应。
• 旧的_document.tsx（负责自定义HTML结构、全局脚本/样式注入）：不需要单独的文件了，你可以直接在layout.tsx里编写<html>和<body>标签的自定义逻辑，比如添加属性、注入全局脚本等。如果需要在每个路由切换时重复渲染某些内容（比如固定的导航栏），可以用app/template.tsx作为辅助，但核心的HTML自定义都在根layout.tsx里完成。

在app目录中配置Material UI的步骤 #

按照下面的方式配置，就能适配新的App Router：

1. 确保你已经安装了必要依赖：@mui/material、@emotion/react、@emotion/styled以及最新版的Next.js。
2. 创建或修改根app/layout.tsx，写入以下结构：

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import type { Metadata } from 'next';

// 自定义你的Material UI主题，按需调整配色、字体等
const theme = createTheme({
  palette: {
    mode: 'light',
    primary: {
      main: '#1976d2',
    },
  },
});

// 配置全局页面元数据，替换成你的内容
export const metadata: Metadata = {
  title: '我的MUI应用',
  description: '基于Next.js App Router的Material UI项目',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <ThemeProvider theme={theme}>
          {/* CssBaseline用于重置浏览器默认样式，保证跨浏览器一致性 */}
          <CssBaseline />
          {/* 所有子路由内容都会渲染在这里 */}
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

3. 如果需要给特定路由分组单独配置主题或样式，可以在对应的子目录下创建layout.tsx（比如app/dashboard/layout.tsx），嵌套ThemeProvider覆盖全局主题即可。
4. 关于SSR样式渲染：Next.js App Router已经原生支持Emotion（Material UI v5默认样式方案），不需要额外配置旧_document里的getInitialProps逻辑，只要按上面的方式注入ThemeProvider，样式就能正确在服务端渲染。

备注：内容来源于stack exchange，提问作者Ali Aref