Next.js 13 App目录集成Mantine UI遇阻：MantineProvider配置求解

你的问题出在MantineProvider的放置位置错误——Next.js 13 App Router要求RootLayout的最外层必须是<html>标签，而你把MantineProvider放在了<html>外面，导致框架无法正确解析布局结构。

修正后的layout.js代码如下：

import { MantineProvider } from '@mantine/core';
import { Metadata } from 'next';

// 配置页面元数据（替代原直接写<head>的方式，符合App Router规范）
export const metadata: Metadata = {
  title: '自定义页面标题',
  description: '自定义页面描述',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="zh-CN">
      <body>
        <MantineProvider
          withGlobalStyles
          withNormalizeCSS
          theme={{
            colorScheme: 'dark',
            // 可添加其他主题配置项
          }}
        >
          {children}
        </MantineProvider>
      </body>
    </html>
  );
}

关键说明： #

• 移除了禁用@next/next/no-head-element的注释，App Router不再推荐直接手写<head>标签，改用metadata对象统一配置页面元数据，更符合框架规范。
• 将MantineProvider移至<body>内部，作为所有子组件的父容器，确保页面内所有组件都能接入Mantine的主题上下文，样式和功能才能正常生效。
• 严格保证<html>是RootLayout的最外层元素，这是App Router的强制要求。

如果需要在<head>中添加自定义脚本、样式等内容，可直接在<html>下的<head>标签内补充，或使用Next.js提供的next/script组件实现。

内容的提问来源于stack exchange，提问作者Youssef-mic