介绍
在 Next.js 中，我们可以使用全局上下文，让一些数据或状态在组件之间共享。这可以避免 props drilling（即一层层地将数据作为 props 传递给子组件）。
全局上下文通常在一个 Context Provider 组件中声明，并使用 useContext 钩子在组件中访问它。但是，在 Next.js 中，我们有一些额外的事情要考虑，因为 Next.js 支持服务器端渲染（SSR）。
本篇文章将介绍如何在 Next.js 中使用全局上下文，并确保在客户端和服务器端都可以正常工作。
准备工作
在开始介绍具体实现之前，我们先需要安装一些依赖项。
首先，我们需要安装 Next.js 和 React：
npm install next react react-dom
然后，为了支持 CSS-in-JS（如 styled-components）的 SSR，我们需要安装 @zeit/next-css 和 @zeit/next-less（如果你使用的是 Less）：
npm install @zeit/next-css @zeit/next-less
最后，如果你想在服务器上使用 MongoDB 数据库，那么我们还需要安装 mongoose：
npm install mongoose
实现
假设我们正在构建一个简单的 Next.js 应用程序，它显示用户列表。我们将使用全局上下文来共享 MongoDB 数据库实例，这样我们就可以在所有组件中使用它，而不必在每个组件中都创建一个新的实例。
以下是我们将用到的组件：
pages/index.js：显示用户列表。components/UserList.js：显示用户列表（显示名称和电子邮件地址）。contexts/DatabaseContext.js：存储 MongoDB 数据库实例和模型。
-- -------------------- ---- -------
-- --------------
------ ----- ---- --------
------ - -------- - ---- -------------------------
------ - ----------------------- - ---- ------------------------------
----- ---- - -- -- -
-------------------------
--------- --
--------------------------
--
------ ------- ------- -------------------- ---- -------
-- ----------------------
------ ------ - ---------- - ---- --------
------ - --------------- - ---- ------------------------------
------ ----- -------- - -- -- -
----- - ----- - - ----------------------------
------ -
----
--------------- -- -
--- ---------------
----------- - ------------
-----
---
-----
--
---- -------------------- ---- -------
-- ---------------------------
------ ------ - -------------- --------- --------- - ---- --------
------ -------- ---- -----------
------ ----- --------------- - ------------------
------ ----- ----------------------- - -- -------- -- -- -
----- ------- --------- - -------------
------------ -- -
----- ----------------- - ----- -- -- -
----- ----------------------------------------- -
---------------- -----
------------------- -----
---
----- ---------- - --- -----------------
----- -------
------ -------
---
----- ---- - ---------------------- ------------
----- ----- - ----- ------------
----------------
--
--------------------
-- ----
------ -
------------------------- -------- ----- ---
----------
---------------------------
--
--如您所见，我们在 DatabaseContextProvider 组件中创建了一个 MongoDB 数据库实例，并使用它来获取用户列表。
值得注意的是，在 DatabaseContextProvider 组件中尝试创建数据库连接。这是因为 Next.js 可以在服务器端和客户端上运行，我们需要在客户端上禁用数据库连接，以避免与服务器上的连接冲突。在这里，我们选择在 useEffect 钩子中创建数据库连接，以确保只有在客户端上运行时才执行它。
现在，我们可以在 UserList 组件中使用 DatabaseContext 上下文来获取用户列表，而无需将其通过 props 传递。
总结
在 Next.js 中，全局上下文可以帮助我们避免 props drilling，并让组件之间共享数据或状态。同时，由于 Next.js 支持服务器端渲染，我们需要注意确保在服务器端和客户端上都能够正常工作。本篇文章介绍了如何在 Next.js 中使用全局上下文，以及如何在客户端和服务器端上实现它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648967e048841e98947b12ed