Next.js 中的中间件是什么-js教程-PHP中文网

What is middleware in Next.js

Next.js 中间件为应用程序中的请求处理提供强大的自定义功能。它允许拦截请求以执行会话验证、日志记录和缓存等操作。然而，低效的中间件实施会严重影响性能。本指南阐明了中间件功能和最佳实践，帮助您了解何时以及如何有效地利用它。

什么是 Next.js 中间件？

Next.js 中间件包含针对每个传入请求自动执行的函数。这些函数在请求数据到达应用程序的路由系统之前检查和修改请求数据。应用程序包括身份验证、日志记录和错误管理。例如，中间件可以通过检查令牌来验证用户会话，防止未经授权的访问。

Next.js 中间件高度灵活且可定制。您可以创建定制功能来满足特定应用程序需求，设置应用程序范围的设置或策略。这简化了路由配置，避免了复杂的多层设置。使用中间件可以产生更健壮、可扩展且可维护的应用程序。

Next.js 中间件处理顺序

了解收到请求时的操作顺序至关重要：

标头： next.config.js 标头首先应用，设置初始请求标头。这非常适合内容安全策略 (CSP) 或 CORS 等安全标头。
重定向： next.config.js 接下来处理重定向，将请求映射到不同的 URL。这可以处理 URL 重写和重定向，管理跨页面或整个应用程序的路由规则。
中间件评估：在标头和重定向之后，评估中间件并执行其逻辑。
应用
beforeFiles: next.config.js beforeFiles（重写），在路由之前启用进一步重写或特定于文件的逻辑。
文件系统路由： 处理应用程序的文件系统路由（例如，public/、_next/static/、页面和应用程序）。这里提供静态文件。
afterFiles: next.config.js afterFiles（重写）被应用，在动态路由之前提供最终修改点。
动态路由： 处理动态路由（例如，/blog/[slug]）。这些需要对变量或参数进行特定的处理和重写。
后备： next.config.js 应用后备，管理无法路由的请求。这允许错误处理程序或后备路由。

常见的 Next.js 中间件用例

身份验证：在访问受保护的资源之前验证用户凭据。中间件可以检查会话令牌，重定向未经身份验证的用户登录。店员有效地使用了这种方法。
日志记录：通过将每个请求记录到中央服务器进行分析和调试来跟踪应用程序事件（用户操作、错误）。
数据获取：（有限制）从 API 或数据库加载数据以获取最新信息。请注意稍后讨论的性能注意事项。
请求路由：自定义路由，将请求重定向到特定路径或实现捕获所有错误处理程序。
缓存：通过将经常访问的资源存储在内存中来提高性能，减少请求。（原文提供示例代码）
速率限制：监控来自用户或IP地址的请求，阻止过多的请求以保护后端资源。
页面转换：实时重写 HTML 或转换数据。这对于图像 URL 重写或提供来自不同域的资源非常有用。
分析/报告：跟踪用户行为和应用程序性能以进行优化。中间件可以修改 cookie 以进行第三方分析集成。
国际化：根据用户区域设置以多种语言交付内容（例如，使用 IP 地址或 HTTP 标头）。

在 Next.js 项目中使用中间件

中间件是通过在项目根目录创建middleware.ts文件来实现的。该文件定义了一个中间件函数和（可选）一个匹配器。

中间件功能

中间件函数包含中间件逻辑。它接受 request 作为输入并返回 response.

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

登录后复制

将请求重定向到 /dashboard 的示例，除非请求以 /api 开头：

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

登录后复制

函数必须返回：NextResponse.next()、NextResponse.redirect()、NextResponse.rewrite()、NextResponse.json() 或自定义 Response/NextResponse。

匹配器

匹配器决定中间件处理哪些请求。它在 config 对象中定义：

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

登录后复制

您可以使用数组进行多个路由或使用正则表达式进行更复杂的匹配：

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

登录后复制

如果没有匹配器，中间件将应用于所有路由，可能会影响性能。

组合多个中间件功能

Next.js 仅支持一个中间件文件。要使用多个函数，请创建单独的函数并按顺序调用它们，如果生成了一个响应，则返回响应：

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

登录后复制

Clerk 和 Next.js 中间件

职员通过提供clerkMiddleware简化身份验证：

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

登录后复制

这处理 cookie 解析和用户验证。您可以使用自定义逻辑扩展它：

<code class="language-javascript">export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}</code>

登录后复制