如何在NextJS中间件中为request对象添加自定义属性？

问题原因 #

Next.js的NextRequest对象是只读实例，直接给它添加user属性不会生效——中间件处理后的request不会传递到后续的路由、组件或API中，后续逻辑拿到的是全新的请求对象。

解决方案 #

下面提供两种可行的传递用户信息的方式：

方式一：通过自定义请求头传递（适合服务端逻辑使用）

在中间件中创建NextResponse实例，将解析后的用户信息存入自定义请求头，后续在服务端逻辑中读取该头信息：

import { NextRequest, NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';

const middleware = async(request: NextRequest) => {
    try {
        const authenticationToken = request.cookies.get('authentication-token')?.value;
        if (!authenticationToken) {
            throw new Error('未找到认证令牌');
        }
        // 修正原代码变量名错误：使用正确的token变量，统一解码后的变量名
        const decoded = jwt.verify(authenticationToken, process.env.JWT_SECRET!);
        
        // 创建响应并添加自定义请求头
        const response = NextResponse.next();
        // 将用户信息转为JSON字符串存入header（避免特殊字符问题）
        response.headers.set('x-user', JSON.stringify(decoded));
        
        return response;
    }   
    catch(error) {
        return NextResponse.json({msg: '无访问权限!'}, {status: 401});
    }
}

export default middleware;

在API路由或Server Components中读取用户信息：

// app/api/example/route.ts
import { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
    const userHeader = request.headers.get('x-user');
    const user = userHeader ? JSON.parse(userHeader) : null;
    return Response.json({ user });
}

方式二：通过Cookie传递（支持客户端/服务端读取）

如果需要客户端也能获取用户信息，可以将解析后的用户信息加密后存入Cookie：

import { NextRequest, NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';

const middleware = async(request: NextRequest) => {
    try {
        const authenticationToken = request.cookies.get('authentication-token')?.value;
        if (!authenticationToken) {
            throw new Error('未找到认证令牌');
        }
        const decoded = jwt.verify(authenticationToken, process.env.JWT_SECRET!);
        
        const response = NextResponse.next();
        // 存入Cookie，根据需求配置安全属性
        response.cookies.set('user-info', JSON.stringify(decoded), {
            httpOnly: true, // 禁止客户端JS读取，提升安全性
            secure: process.env.NODE_ENV === 'production',
            sameSite: 'strict',
            path: '/'
        });
        
        return response;
    }   
    catch(error) {
        return NextResponse.json({msg: '无访问权限!'}, {status: 401});
    }
}

export default middleware;

额外修正点 #

原代码存在变量名错误：

• jwt.verify(token) 中的token应改为authenticationToken
• request.user = decoded 中的decoded未定义，实际是userValue（建议统一变量名避免混淆）

内容的提问来源于stack exchange，提问作者cooldude