如何为NextRequest类型全局新增自定义属性？

你可以通过TypeScript的模块扩展能力直接给NextRequest追加全局类型定义，不需要每个文件单独导入自定义接口。

步骤1：创建类型声明文件 #

在项目根目录或src目录下新建一个.d.ts后缀的声明文件，比如命名为global.d.ts，写入如下内容：

import "next/server";

declare module "next/server" {
  interface NextRequest {
    // 此处添加你需要扩展的属性和对应类型
    name: string;
  }
}

注意必须先导入next/server模块，这里的操作是对原有接口的扩展而非覆盖。

步骤2：更新tsconfig配置 #

修改项目的tsconfig.json，确保include数组包含你刚创建的声明文件：

{
  "compilerOptions": {
    // 保留原有配置即可
  },
  "include": ["next-env.d.ts", "global.d.ts", "**/*.ts", "**/*.tsx"]
}

验证使用 #

配置生效后，所有用到NextRequest的地方都会自动识别你扩展的属性，无需额外导入自定义类型，原有中间件代码不需要修改类型声明就可以正常运行：

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
    // 不再报属性不存在的错误
    req.name = 'Foo'
    return NextResponse.next()
}

常见问题处理 #

• 配置完成后如果依然报错，可以重启IDE的TypeScript服务，VS Code用户可以按Ctrl+Shift+P（Mac系统为Cmd+Shift+P），执行TypeScript: Restart TS Server即可生效。
• 如果需要扩展多个属性，直接在声明的NextRequest接口内追加对应类型定义即可，支持所有合法的TypeScript类型语法。

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