Next.js 13中React Context API使用及升级报错解决方案咨询

一、解决createContext is not a function报错 #

这个报错的核心原因是Next.js 13 App Router默认使用Server Component，而createContext属于客户端React API，无法在Server Component中执行。解决方法如下：

在你的Context定义文件顶部添加'use client'指令，将其标记为客户端组件：

'use client'
import React from 'react'

const SiteContext = React.createContext()

export default SiteContext

也可以改用解构导入的写法，更符合现代React规范：

'use client'
import { createContext } from 'react'

const SiteContext = createContext()

export default SiteContext

二、服务端使用Context满足SEO需求 #

要在服务端渲染阶段注入Context初始值（保证SEO内容正确渲染），可以按照以下步骤实现：

1. 重构Context，添加Provider组件 #

创建带Provider的Context文件（比如app/contexts/SiteContext.js）：

'use client'
import { createContext, useContext } from 'react'

const SiteContext = createContext(null)

// 客户端Provider组件，接收服务端传递的初始数据
export function SiteProvider({ children, initialData }) {
  return (
    <SiteContext.Provider value={initialData}>
      {children}
    </SiteContext.Provider>
  )
}

// 自定义Hook，简化Context调用
export function useSiteContext() {
  const context = useContext(SiteContext)
  if (!context) {
    throw new Error('useSiteContext必须在SiteProvider内部使用')
  }
  return context
}

2. 在根布局中服务端获取数据并传递给Provider #

根布局（app/layout.js）是Server Component，可以安全地在服务端获取SEO相关数据（比如站点配置、页面元数据等），然后传递给客户端的SiteProvider：

import { SiteProvider } from './contexts/SiteContext'

// 服务端异步获取数据（示例：可替换为数据库查询、API调用等）
async function getServerSideSiteData() {
  return {
    siteTitle: '我的站点',
    metaDescription: 'SEO友好的站点描述',
    keywords: 'Next.js, React, SEO'
  }
}

export default async function RootLayout({ children }) {
  // 服务端获取初始数据
  const siteData = await getServerSideSiteData()

  return (
    <html lang="zh-CN">
      <body>
        {/* 将服务端数据传给客户端Provider */}
        <SiteProvider initialData={siteData}>
          {children}
        </SiteProvider>
      </body>
    </html>
  )
}

3. 在组件中使用Context #

• 客户端组件：直接用useSiteContext获取数据，渲染SEO相关内容
• 服务端组件：如果需要数据，建议直接在组件内部通过服务端逻辑获取（避免在Server Component中调用客户端Hook），或者通过props传递根布局获取的数据

关键注意事项 #

• 所有涉及createContext、useContext、useState等客户端API的组件，必须添加'use client'指令
• 服务端数据获取逻辑要放在Server Component中（比如根布局、服务端页面），确保SEO内容在服务端渲染时已生成
• 不要在Server Component中直接调用客户端React Hook，会导致渲染错误

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