需要看本书Next.js13项目实践

中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。

Web 中间件(Web Middleware)是在 web 服务器和 web 应用程序之间的一层软件。它在浏览器的请求和服务器的响应之间起调解作用。

Web 中间件的主要功能包括:

身份认证 - 验证用户身份。
授权 - 判断用户是否有权限执行某个操作。
会话管理 - 管理用户会话,包括会话的创建、读取和删除。
请求派发 - 将请求派发到不同的应用程序或服务。
负载均衡 - 在多台服务器之间分配负载。
静态文件处理 - 直接返回静态文件,无需参与应用程序逻辑。
HTTP缓存 - 缓存HTTP请求和响应,提高性能。
API管理 - 对外提供API,进行访问控制、限流等。
日志和监控 - 日志记录和性能监控。
安全防护 - 防范常见的Web攻击,如SQL注入、XSS等。

常见的Web中间件包括Nginx、Apache、Tomcat等。使用中间件可以提高Web应用程序的性能、安全性、稳定性。

Pipe

我们可以把web处理的过程比作成pipe的处理，如图所示： javascript pipe

如果我们在这个过程中插入一个handle处理器，那么我们就可以在这个链路中很容易注入以上10个功能添加到你的系统中。

JavaScript Handle

比如你想所有的请求都需要加入日志，没有中间件。我们就需要每个请求中添加日志的处理逻辑，如果有了中间件。我们就可以只需要把处理逻辑添加到中间件即可。

Next.js 中如何使用中间件？

我们需要在root目录下添加middleware.ts的文件。内容模板如下:

import { NextResponse } from "next/server";
import { NextRequest } from "next/server";

// This function can be marked `async` if using `await` inside
export async function middleware(request: NextRequest) {
  return NextResponse.next();
}

// See "Matching Paths" below to learn more
// 这个也可以不需要，在middleware中处理也可以。
export const config = {
  matcher: ["/:path*"],
};

在上一篇文章中，我们需要给我们的请求添加Auth的校验，这个时候我们就可以这么做!

export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  if (["/auth"].some((prefix) => pathname.startsWith(prefix))) {
    return NextResponse.next();
  }

  const nextCookies = request.cookies;
  const token = nextCookies.get("realibox_access_token");
  if (!token || !token.value) {
    return NextResponse.redirect(GetHost().replace("/api/", "") + "/auth");
  }

  return NextResponse.next();
}

结语

这样如果如果用户没有登录，那么就会跳转到登录页面。

看到这里你已经会使用中间件了，希望上面提到的10点，可以自己按照自己的需要实现一遍。

我的B站视频号更多视频动态。

微信公众号订阅[梦兽编程]

Next.js13+ 如何使用中间件？

Pipe

Next.js 中如何使用中间件？

结语