我们应该如何在 Next.js 13 中使用 React 的 Context API？

Question

我们在 next.js 12 应用程序中使用了 React 的上下文 API。

我们想要升级到 next.js 13。

我们得到这个错误：

React__WEBPACK_IMPORTED_MODULE_0__.createContext 不是一个函数

对于这段代码：

import React from 'react'

const SiteContext = React.createContext()

export default SiteContext

我们现在应该做什么？我在网上找不到这方面的资源。

另外，我们需要服务器上的 Context API，因为 SEO 很重要，而且我们不想在客户端上呈现。

Answer 1

问题是您需要“使用客户端”指令。

由于您的 import 语句，该错误已被抑制。将导入更改为import { useContext } from 'react'，您将收到以下错误：

您正在导入需要 createContext 的组件。它仅在客户端组件中工作，但其父组件都没有标记为“使用客户端”，因此默认情况下它们是服务器组件。

查看beta 文档以获取更多详细信息，但基本上，应用程序目录中的所有组件都是服务器组件。对于客户端组件，您需要使用该指令。

"use client"

import React from 'react'

const SiteContext = React.createContext()

export default SiteContext