NextJs - Middleware(中间件)-Toy模板网

这篇具有很好参考价值的文章主要介绍了NextJs - Middleware(中间件)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。
中间件在缓存内容和路由匹配之前运行。

使用规则

使用项目根目录中的文件 middleware.ts（或 .js）来定义中间件。例如，与页面或应用程序处于同一级别，或者在 src 内部（如果适用）。

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}
 
// See "Matching Paths" below to learn more
export const config = {
  matcher: '/about/:path*',
}

匹配路径

将为项目中的每个路由调用中间件。以下是执行顺序：

headers from next.config.js
来自 next.config.js的重定向
中间件（重写、重定向等）
来自 next.config.js 的 beforeFiles（重写）
文件系统路由（public/、_next/static/、pages/、app/等）
来自 next.config.js 的 afterFiles（重写）
动态路由 (/blog/[slug])
从 next.config.js 回退（重写）

Matcher (匹配器)

matcher 允许您过滤中间件以在特定路径上运行。

export const config = {
  matcher: '/about/:path*',
}

可以使用数组语法匹配单个路径或多个路径：

export const config = {
  matcher: ['/about/:path*', '/dashboard/:path*'],
}

匹配器配置允许完整的正则表达式，因此支持负向查找或字符匹配等匹配。可以在此处查看用于匹配除特定路径之外的所有路径的负前瞻示例：

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     */
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
}

注意：