从零开始NEXT.js(六)——中间件

从零开始NEXT.js(五)——路由组和平行路由

上一章我们介绍了路由组和平行路由，这一章主要介绍一下中间件

什么是中间件

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

使用案例

将中间件集成到您的应用程序中可以显著提高性能、安全性和用户体验。中间件特别有效的一些常见情况包括：

• 身份验证和授权：在授予对特定页面或 API 路由的访问权限之前，请确保用户身份并检查会话 cookie。
• 服务器端重定向：根据特定条件（例如，区域设置、用户角色）在服务器级别重定向用户。
• 路径改写：根据请求属性动态重写 API 路由或页面的路径，支持 A/B 测试、功能推出或遗留路径。
• 爬虫程序检测：通过检测和阻止爬虫程序流量来保护您的资源。
• 日志记录和分析：在页面或 API 进行处理之前，捕获和分析请求数据以获取见解。
• 功能标记：动态启用或禁用功能，以实现无缝功能推出或测试。

认识到中间件可能不是最佳方法的情况同样至关重要。以下是一些需要注意的情况：

• 复杂的数据获取和操作：中间件不是为直接数据获取或操作而设计的，这应该在路由处理程序或服务器端实用程序中完成。
• 繁重的计算任务：中间件应该是轻量级的，并且响应速度快，否则可能会导致页面加载延迟。繁重的计算任务或长时间运行的进程应在专用路由处理程序中完成。
• 广泛的会话管理：虽然中间件可以管理基本的会话任务，但广泛的会话管理应由专用身份验证服务或在路由处理程序内进行管理。
• 直接数据库操作：不建议在中间件中执行直接数据库操作。数据库交互应在路由处理程序或服务器端实用程序中完成。

例子

在我们项目的更目录下创建中间件middleware.tsx

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

export function middleware(request:NextResponse){
    console.log(request.url)
    return NextResponse.redirect(new URL("/",request.url))
}


export const config={
    matcher:"/about/:path*",
}

在这个中间件中，我们设置了如果用户去访问了http://localhost:3000/about这个页面路由，就会重定向回http://localhost:3000。

页面效果如下：

点击about后本来要跳转到about页面，现在又重定向回了根路由。