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

【问题标题】：How should we use React's Context API in Next.js 13?我们应该如何在 Next.js 13 中使用 React 的 Context API？
【发布时间】：2022-12-21 06:59:01
【问题描述】：

我们在 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 很重要，我们不想在客户端呈现。

【问题讨论】：

尝试，将导出默认值更改为导出
@JacksonQuintero，甚至无法编译。 JS 中有默认导出或命名导出。

标签： reactjs next.js

【解决方案1】：

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

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

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

查看 beta docs for more details，但基本上，app 目录中的所有组件都是服务器组件。对于客户端组件，您需要使用该指令。
"use client"

import React from 'react'

const SiteContext = React.createContext()

export default SiteContext

【讨论】：

这是否意味着我们不能在服务器端使用 Context API？它是 React 限制还是 Next 限制？
是的，useState、useEffect 和 createContext 是仅限客户端的功能。 “使用客户端”指令是作为服务器组件功能的一部分随 React 一起引入的，因此它是一个“React 东西”，但我不确定它本身是否是一个限制。如果您的组件需要支持用户交互，例如那些需要状态的交互，那么根据定义，它就是一个客户端组件。
是的，它是一个客户端组件。但是我们可以为了 SEO 而在服务器上渲染它吗？假设我们想要一个联系我们的表格。它是一个客户端组件。但是 /contact 页面需要在服务器上呈现，以便 Google 可以对其进行索引。
简短的回答是肯定的。查看docs 了解详细信息，但是，服务器和客户端组件都可以在构建时在服务器上预呈现。

【解决方案2】：

Next 13 不支持服务器上的 React Context API 是问题所在。考虑到 SEO 问题，您现在必须坚持使用旧的应用程序/页面方法。我希望他们能尽快支持 context。

【讨论】：