Next.js 13中使用Context时如何正常调用Metadata API？

安全阿岳

2026-7-19

解决Next.js Layout中ThemeProvider与Metadata冲突问题

问题本质

加了'use client'的客户端组件无法导出Metadata——因为Metadata是Next.js在服务端渲染阶段解析的内容，客户端组件不会在服务端执行这部分逻辑；但如果不加'use client'，ThemeProvider（依赖客户端上下文useContext）又会导致服务端渲染报错。

分步解决

1. 保留服务端根Layout

根layout.tsx不添加'use client'，负责定义Metadata和基础页面结构：

// app/layout.tsx
import { Metadata } from 'next'
import ThemeProviderWrapper from './theme-provider-wrapper'

export const metadata: Metadata = {
  title: {
    default: 'some title',
    template: '%s | some title'
  }
}

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <ThemeProviderWrapper>{children}</ThemeProviderWrapper>
      </body>
    </html>
  )
}

2. 单独创建客户端主题包装组件

新建theme-provider-wrapper.tsx，标记为客户端组件，专门处理ThemeProvider和LocalizationProvider：

// app/theme-provider-wrapper.tsx
'use client'

import { createTheme, ThemeProvider } from '@mui/material/styles'
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'

// 自定义主题配置
const theme = createTheme({
  // 你的主题设置，比如调色板、排版等
})

export default function ThemeProviderWrapper({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider theme={theme}>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        {children}
      </LocalizationProvider>
    </ThemeProvider>
  )
}