Next.js v13.1.6新app目录配置Chakra UI v2.4.9失效求助

你的核心问题是混淆了Next.js 13 App Router 和 Pages Router 的全局配置方式：_app.js 仅对 src/pages/ 下的页面生效，而 src/app/ 目录的页面需要通过根布局 layout.js 来注入ChakraProvider。以下是分步解决方案：

1. 补全必要依赖 #

确保安装了适配Next.js 13的Chakra UI包：

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/next-js

2. 配置App Router根布局（针对src/app/页面） #

在src/app/layout.js中创建根布局，包裹所有App Router页面：

import { ChakraProvider } from '@chakra-ui/react'
// 若使用自定义主题，引入你的主题文件；无自定义主题可省略此行
import { theme } from '@/styles/theme'

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <ChakraProvider theme={theme}>{children}</ChakraProvider>
      </body>
    </html>
  )
}

3. 配置Pages Router全局组件（针对src/pages/页面） #

将_app.js放在**src/pages/_app.js**路径下，确保Pages Router页面能正常使用Chakra：

import { ChakraProvider } from '@chakra-ui/react'
import { theme } from '@/styles/theme'

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

export default MyApp

4. 验证主题与组件使用 #

如果你的红色主题是自定义的，确保主题配置正确（示例src/styles/theme.js）：

import { extendTheme } from '@chakra-ui/react'

const theme = extendTheme({
  colors: {
    brand: {
      500: '#ff2d20', // 自定义红色主题色
    },
  },
})

export default theme

在src/app/page.js中使用组件时，指定对应颜色方案：

import { Button } from '@chakra-ui/react'

export default function Home() {
  return (
    <div>
      {/* 使用自定义品牌红色 */}
      <Button colorScheme="brand">自定义红色按钮</Button>
      {/* 使用Chakra默认红色 */}
      <Button colorScheme="red">默认红色按钮</Button>
    </div>
  )
}

5. 排查常见问题 #

• 移除放在src/app/、项目根目录等错误位置的_app.js，避免冲突
• 重启Next.js开发服务器，清除浏览器缓存
• 确认没有在组件层级覆盖Chakra的全局样式

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