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