在前端开发中，常常需要使用一些中间件处理 HTTP 请求或者执行不同的逻辑。在 Node.js 中，通过 Express 等框架，我们可以方便地使用中间件。而在 Next.js 中，使用 next-middleware 可以在客户端和服务器端使用中间件。
安装
使用 npm 安装 next-middleware：
npm install next-middleware
使用
使用 next-middleware，我们需要在 pages 文件夹下创建一个名为 _middleware.js 的文件。
在该文件中，我们可以导入 next-middleware，并使用 useMiddleware 方法来声明中间件。
import { useMiddleware } from "next-middleware";
import middleware from "./middleware";
export default useMiddleware(middleware);上面的代码中，我们导入了一个名为 middleware 的模块，并使用 useMiddleware 方法来声明该模块为中间件。
next-middleware 的中间件方法和 Express 中的类似，可以接收 req、res 和 next 参数：
export default function middleware(req, res, next) {
// 处理逻辑
next();
}Demo
下面我们来实现一个简单的权限控制中间件。
- 在 pages 文件夹下创建一个名为 _middleware.js 的文件。
- 编写权限控制中间件，如果用户未登录则跳转至登录页面。
-- -------------------- ---- -------
------ - ------------- - ---- ------------------
------ - --------- - ---- --------------
------ - ---------- ---------- - ---- --------
------ ------- ------------------- ---- ----- -- -
----- ------ - ------------
----- ---------- - -----------------------------------
------------ -- -
-- ------------- -
----------------------
-
-- --------------
-------
---上面的代码中，我们导入了 useRouter 和 useContext，以及一个名为 AuthContext 的上下文对象，用于获取用户登录状态信息。
我们通过 useEffect 方法来判断用户是否已登录，如果未登录则跳转至登录页面。
总结
通过使用 next-middleware，我们可以在 Next.js 中方便地使用中间件处理 HTTP 请求或者执行不同的逻辑。在实际的开发中，可以根据业务需求，封装自己的中间件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4581e8991b448e5c90