Next.js 实战 (十)：中间件的魅力，打造更快更安全的应用

什么是中间件？

在 Next.js 中，中间件（Middleware）是一种用于处理每个传入请求的功能。它允许你在请求到达页面之前对其进行修改或响应。

通过中间件，你可以实现诸如日志记录、身份验证、重定向、CORS配置、压缩等任务。中间件是构建高效和安全的 web 应用的重要组成部分。

应用场景

身份验证

你可以在中间件中检查用户的身份验证状态，比如从cookie或头部信息中读取JWT令牌，并根据验证结果决定是否允许访问特定页面或API端点。如果验证失败，可以返回401未授权状态码或者重定向到登录页面。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';export function middleware(request) {const token = request.cookies.get('authToken')?.value;if (!token) {// 如果没有令牌，则重定向到登录页面return NextResponse.redirect(new URL('/login', request.url));}// 继续处理链return NextResponse.next();
}

日志记录

中间件非常适合用来记录所有进入应用程序的请求。这可以帮助监控流量模式、诊断问题以及了解用户行为。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';export function middleware(request) {console.log(`Request to ${request.url} at ${new Date().toISOString()}`);// 继续处理链return NextResponse.next();
}

请求/响应转换

可以在请求到达最终目的地之前对请求数据进行预处理，也可以在发送给客户端之前修改响应内容。例如，格式化数据、添加额外的HTTP头、压缩响应体等。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';export async function middleware(request) {// 修改请求体（假设是JSON格式）let modifiedBody = await request.json();modifiedBody.message = "Modified message";// 创建新的请求实例const newReq = new Request(request, {body: JSON.stringify(modifiedBody),});// 获取响应并修改它const response = await fetch(request.nextUrl.pathname, {method: request.method,headers: request.headers,body: newReq.body,});const resClone = await response.clone();const data = await resClone.json();data.newField = "This is a new field"; // 添加新字段// 返回修改后的响应return new Response(JSON.stringify(data), {status: response.status,headers: response.headers,});
}

重定向

基于某些条件（如URL路径、查询参数、用户代理等），你可以使用中间件来执行重定向操作，将用户引导至不同的页面。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';export function middleware(request) {// 如果访问的是旧路径，则重定向到新路径if (request.nextUrl.pathname.startsWith('/login')) {return NextResponse.redirect(new URL('/dashboard', request.url));}// 继续处理链return NextResponse.next();
}

CORS（跨源资源共享）

设置适当的CORS头以允许或限制来自其他域的请求，这对于拥有多个子域名或需要与第三方服务交互的应用非常重要。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';export function middleware(request) {const response = NextResponse.next();// 设置CORS头response.headers.set('Access-Control-Allow-Origin', '*');response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');return response;
}

限流

防止滥用API接口，可以通过中间件实现速率限制，限制同一IP地址在一定时间内的请求次数。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';
import rateLimit from 'express-rate-limit'; // 需要安装依赖const limiter = rateLimit({windowMs: 1 * 60 * 1000, // 1分钟max: 100, // 每分钟最多100次请求
});export function middleware(request) {return new Promise((resolve, reject) => {limiter(request, {}, (err) => {if (err) {return reject(new NextResponse('Too many requests', { status: 429 }));}resolve(NextResponse.next());});});
}

国际化路由

根据用户的语言偏好或地理位置自动调整网站的语言版本。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';export function middleware(request) {const locale = request.cookies.get('NEXT_LOCALE')?.value || 'en';// 如果不是根路径并且没有包含语言前缀，则添加语言前缀if (!request.nextUrl.pathname.startsWith(`/${locale}`)) {const url = new URL(request.url);url.pathname = `/${locale}${url.pathname}`;return NextResponse.redirect(url);}// 继续处理链return NextResponse.next();
}

静态文件服务

尽管Next.js已经提供了基本的静态文件服务功能，但你可以用中间件来增强这一功能，比如为特定类型的文件提供自定义处理逻辑。
示例代码：

// middleware.js
import { NextResponse } from 'next/server';
import fs from 'fs/promises';export async function middleware(request) {const path = request.nextUrl.pathname;if (path.startsWith('/static-files/')) {try {const filePath = `./public${path}`;const file = await fs.readFile(filePath);return new Response(file, {headers: { 'Content-Type': 'application/octet-stream' },});} catch (error) {return NextResponse.next();}}// 继续处理链return NextResponse.next();
}

config 配置对象

matcher

matcher 是一个非常强大的配置项，它允许你指定中间件应该应用于哪些路径。你可以通过正则表达式或通配符模式来匹配URL路径。

  • 通配符：可以使用 * 来表示任意字符序列。
  • 正则表达式：支持完整的正则表达式语法，但需要使用反斜杠进行转义。
export const config = {matcher: ['/about', '/dashboard/:path*', '/users/:uid'],
};

unstable_ignorePaths

这个配置项可以让中间件忽略某些路径，即不对其应用中间件逻辑。这对于排除不需要处理的资源或者避免循环重定向等问题非常有用。

export const config = {unstable_ignorePaths: ['/api/*', '/static/*'],
};

这里，所有以 /api /开头和静态资源路径都将被忽略，不会受到中间件的影响。

maxDuration

maxDuration 定义了中间件函数的最大执行时间（以秒为单位）。如果中间件执行时间超过了这个值，Next.js将会抛出错误。这有助于防止长时间运行的任务阻塞请求处理。

export const config = {maxDuration: 5, // 中间件最大执行时间为5秒
};

regions

regions 配置项指定了中间件应该部署到的地理区域。这对于希望减少延迟、提高性能的应用来说非常重要，因为它可以让中间件尽可能靠近用户部署。

export const config = {regions: ['us-east-1', 'eu-west-1'], // 在美国东部和欧洲西部部署
};

下面是一个结合了多个config配置项的例子：

// middleware.js
import { NextResponse } from 'next/server';export function middleware(request) {// 中间件逻辑...return NextResponse.next();
}export const config = {matcher: ['/about', '/dashboard/:path*', '/users/:uid'],unstable_ignorePaths: ['/api/*', '/static/*'],maxDuration: 10,regions: ['us-east-1', 'eu-west-1'],
};

总结

总之，Next.js中间件不仅仅是一个简单的请求处理器，它更像是一个构建模块，允许开发者以一种非侵入式的方式对HTTP请求进行预处理和后处理。这不仅简化了代码逻辑，提高了代码的可维护性，而且还有助于创建更加快速、安全和用户友好的Web体验。无论你是刚开始接触Next.js的新手，还是已经熟悉框架的老手，掌握中间件的使用都将为你的项目带来显著的价值。

Github：next-admin

线上预览地址：Next Admin

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/7411.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SpringBoot3+Vue3开发学生选课管理系统

SpringBoot3+Vue3开发学生选课管理系统

功能介绍 分三个角色登录：学生登录，老师登录，教务管理员登录，不同用户功能不同！ 1.学生用户功能 选课记录，查看选课记录，退选。选课管理，进行选课。通知管理，查看通知消…
阅读更多...
牛客周赛 Round 78 A-C

牛客周赛 Round 78 A-C

A.时间表查询！ 链接：https://ac.nowcoder.com/acm/contest/100671/A 来源：牛客网 题目描述 今天是2025年1月25日，今年的六场牛客寒假算法基础集训营中，前两场比赛已经依次于 20250121、20250123 举行；而…
阅读更多...
Android - 通过Logcat Manager简单获取Android手机的Log

Android - 通过Logcat Manager简单获取Android手机的Log

由于工作需要，经常需要获取Android手机的Log。 平常都是通过adb命令来获取，每次都要写命令。 偶然的一个机会，我从外网发现了一个工具 Logcat Manager，只需要通过简单的双击即可获取Android的Log，这里也分享一下。 目…
阅读更多...
苍穹外卖-day10

苍穹外卖-day10

苍穹外卖-day10 Spring Task Spring Task 是Spring框架提供的任务调度工具，可以按照约定的时间自动执行某个代码逻辑。 cron表达式 cron表达式其实就是一个字符串，通过cron表达式可以定义任务触发的时间 **构成规则：**分为6或7个域&…
阅读更多...
一文详解Filter类源码和应用

一文详解Filter类源码和应用

背景 在日常开发中，经常会有需要统一对请求做一些处理，常见的比如记录日志、权限安全控制、响应处理等。此时，ServletApi中的Filter类，就可以很方便的实现上述效果。 Filter类 是一个接口，属于 Java Servlet API 的一部…
阅读更多...
（2）STM32 USB设备开发-USB虚拟串口

（2）STM32 USB设备开发-USB虚拟串口

例程：STM32USBdevice: 基于STM32的USB设备例子程序 - Gitee.com 本篇为USB虚拟串口教程，没有知识，全是实操，按照步骤就能获得一个STM32的USB虚拟串口。本例子是在野火F103MINI开发板上验证的，如果代码中出现一些外设的…
阅读更多...
K8S中的数据存储之基本存储

K8S中的数据存储之基本存储

基本存储类型 EmptyDir 描述：当 Pod 被调度到节点上时，Kubernetes 会为 Pod 创建一个空目录，所有在该 Pod 中的容器都可以访问这个目录。特点： 生命周期与 Pod 绑定，Pod 删除时，数据也会丢失。适用于临时…
阅读更多...
谈谈RTMP|RTSP播放器视频view垂直|水平反转和旋转设计

谈谈RTMP|RTSP播放器视频view垂直|水平反转和旋转设计

技术背景 我们在做RTMP|RTSP播放器的时候，有这样的技术诉求，有的摄像头出来的数据是有角度偏差的，比如“装倒了”，或者，图像存在上下或者左右反转，这时候，就需要播放器能做响应的处理&#xff…
阅读更多...
自然语言处理——从原理、经典模型到应用

自然语言处理——从原理、经典模型到应用

1. 概述 自然语言处理（Natural Language Processing，NLP）是一门借助计算机技术研究人类语言的科学，是人工智能领域的一个分支，旨在让计算机理解、生成和处理人类语言。其核心任务是将非结构化的自然语言转换为机器可以…
阅读更多...
【MFC】C++所有控件随窗口大小全自动等比例缩放源码(控件内字体、列宽等未调整) 20250124

【MFC】C++所有控件随窗口大小全自动等比例缩放源码(控件内字体、列宽等未调整) 20250124

MFC界面全自动等比例缩放 1.在初始化里 枚举每个控件记录所有控件rect 2.在OnSize里，根据当前窗口和之前保存的窗口的宽高求比例x、y 3.枚举每个控件，根据比例x、y调整控件上下左右,并移动到新rect struct ControlInfo {CWnd* pControl;CRect original…
阅读更多...
SkyWalking介绍

SkyWalking介绍

一款开源的系统性能监控工具(APM) 背景 在解决提报的IT性能问题时，由于缺乏系统性能监控运维的工具，导致问题排查非常困难，尤其是偶发的问题，无法进行问题复现还原，需要一套能实时监控线上系统性能的工具平台。 SkyWal…
阅读更多...
Pyecharts之图表组合与布局优化

Pyecharts之图表组合与布局优化

在数据可视化中，我们经常需要将多个图表组合在一起，以展示不同维度的数据或者进行对比分析。同时，合理的布局能够提升图表的可读性和用户体验。Pyecharts 提供了强大的组件和方法，让我们可以轻松实现图表的组合和布局优化。本篇将…
阅读更多...
物业管理平台系统提升社区智能化服务效率与管理水平

物业管理平台系统提升社区智能化服务效率与管理水平

内容概要 在现代社会中，物业管理平台系统的出现，为社区的智能化服务带来了革命性的变化。这种系统不仅仅是提升了工作效率，更是通过一系列智能化功能，根本性改变了物业管理的方式。比如，在广告位管理方面，…
阅读更多...
Kafka 深入服务端 — 时间轮

Kafka 深入服务端 — 时间轮

Kafka中存在大量的延迟操作，比如延时生产、延时拉取和延时删除等。Kafka基于时间轮概念自定义实现了一个用于延时功能的定时器，来完成这些延迟操作。 1 时间轮 Kafka没有使用基于JDK自带的Timer或DelayQueue来实现延迟功能，因为它们的插入和…
阅读更多...
Baklib如何推动企业知识管理的创新与转型探讨

Baklib如何推动企业知识管理的创新与转型探讨

内容概要 在当今快速发展的数字化时代，企业需要不断适应变化，以保持竞争优势。Baklib作为一款企业知识管理中台，扮演着推动数字化转型的重要角色。它通过提供一个集成的知识管理平台，帮助企业高效管理和共享内部及外部的知识资源…
阅读更多...
日志收集Day005

日志收集Day005

1.filebeat的input类型之filestream实战案例: 在7.16版本中已经弃用log类型,之后需要使用filebeat,与log不同，filebeat的message无需设置就是顶级字段 1.1简单使用： filebeat.inputs: - type: filestreamenabled: truepaths:- /tmp/myfilestream01.lo…
阅读更多...
【Rust自学】15.3. Deref trait Pt.2：隐式解引用转化与可变性

【Rust自学】15.3. Deref trait Pt.2：隐式解引用转化与可变性

喜欢的话别忘了点赞、收藏加关注哦（加关注即可阅读全文），对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 15.3.1. 函数和方法的隐式解引用转化(Deref Coercion) 隐式解引用转化(Deref Coercion)是为…
阅读更多...
【技巧】优雅的使用 pnpm+Monorepo 单体仓库构建一个高效、灵活的多项目架构

【技巧】优雅的使用 pnpm+Monorepo 单体仓库构建一个高效、灵活的多项目架构

单体仓库（Monorepo）搭建指南：从零开始 单体仓库（Monorepo）是一种将多个相关项目集中管理在一个仓库中的开发模式。它可以帮助开发者共享代码、统一配置，并简化依赖管理。本文将通过实际代码示例&#xff0…
阅读更多...
【MySQL — 数据库增删改查操作】深入解析MySQL的create insert 操作

【MySQL — 数据库增删改查操作】深入解析MySQL的create insert 操作

数据库CRUD操作 1 CRUD简介 CURD是对数据库中的记录进行基本的增删改查操作: 2. Create 新增 语法 INSERT [INTO] table_name[(column [，column] ...)] VALUES(value_list)[，(value_list)] ... # value 后面的列的个数和类型，要和表结构匹配…
阅读更多...
VSCode下EIDE插件开发STM32

VSCode下EIDE插件开发STM32

VSCode下STM32开发环境搭建 本STM32教程使用vscode的EIDE插件的开发环境，完全免费，有管理代码文件的界面，不需要其它IDE。 视频教程见本人的 VSCodeEIDE开发STM32 安装EIDE插件 Embedded IDE 嵌入式IDE 这个插件可以帮我们管理代码文件&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023