须知:从 Next.js 16 开始,Middleware 现已更名为 Proxy,以更好地反映其用途。其功能保持不变。
代理允许你在请求完成之前运行代码。然后,你可以根据传入的请求,通过重写、重定向、修改请求或响应头,或者直接响应来修改响应。
代理在以下一些常见场景中非常有效:
对于简单的重定向,请优先考虑在 next.config.ts 中使用 redirects 配置。当你需要访问请求数据或实现更复杂的逻辑时,才应使用代理。
代理_不_适用于缓慢的数据获取。虽然代理可用于 乐观检查(例如基于权限的重定向),但它不应作为完整的会话管理或授权解决方案。
在代理中,使用带有 options.cache、options.next.revalidate 或 options.next.tags 的 fetch 方法将无效。
在项目根目录或(如果适用)src 内部创建一个 proxy.ts(或 .js)文件,使其与 pages 或 app 位于同一层级。
注意:虽然每个项目只支持一个
proxy.ts文件,但你仍然可以将代理逻辑组织成模块。将代理功能拆分到单独的.ts或.js文件中,并将其导入到主proxy.ts文件。这有助于更清晰地管理特定路由的代理,并将其聚合到proxy.ts中以实现集中控制。通过强制使用单个代理文件,可以简化配置,防止潜在冲突,并通过避免多层代理来优化性能。
你可以将代理函数导出为默认导出或名为 proxy 的具名导出:
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
// This function can be marked `async` if using `await` inside
export function proxy(request: NextRequest) {
return NextResponse.redirect(new URL('/home', request.url))
}
// Alternatively, you can use a default export:
// export default function proxy(request: NextRequest) { ... }
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}import { NextResponse } from 'next/server'
// This function can be marked `async` if using `await` inside
export function proxy(request) {
return NextResponse.redirect(new URL('/home', request.url))
}
// Alternatively, you can use a default export:
// export default function proxy(request) { ... }
// See "Matching Paths" below to learn more
export const config = {
matcher: '/about/:path*',
}