Next.js 如何使用中间件 Middleware

乐闻

2024年03月04日 09:53· 阅读 2552

前言

当我们提到中间件（Middleware），你可能会想到后端服务，如 Express.js 中用于处理 HTTP 请求的函数。但在 Next.js 中，中间件也是一个非常重要的概念。Next.js 中间件代表了在服务器和浏览器之间的一层强大的逻辑处理层，它们可以在请求被处理成页面之前或在页面渲染之后执行代码。

什么是 Next.js 中间件？

Next.js 中间件是在 Next.js 10 版本中引入的概念，并在后续版本中得到增强。它允许开发者在请求被 Next.js 路由处理之前拦截这些请求，并执行自定义的服务器端和/或客户端代码。

这些中间件可以运行在两个不同的阶段：

Server-side: 当请求初始到达服务器时；
Client-side: 在客户端导航到不同页面时（例如，当使用 next/link 或 next/router）。

中间件的作用是什么？

Next.js 中间件的作用非常多样化，这里有一些常见的用例：

身份验证: 检查用户是否已登录，并重定向未认证用户到登录页面。
日志记录: 在处理请求之前记录请求信息，如用户代理、IP 地址等。
A/B 测试: 根据某些逻辑展示不同版本的页面。
重写和重定向: 基于请求动态重写 URL 路径或进行重定向。
国际化: 基于请求头或 URL 参数调整内容以适应不同的区域和语言。

如何使用 Next.js 中间件？

下面是一步步通过简单的例子来演示如何使用 Next.js 中间件：

步骤 1: 创建中间件文件

在 Next.js 应用的根目录下创建 middleware.js 或在 pages 目录下的 _middleware.js。这个文件是特殊的，Next.js 会自动将其识别为中间件。

javascript
// pages/_middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
    // 我们将在此处添加逻辑
    return NextResponse.next();
}

步骤 2: 添加逻辑

现在，我们可以在中间件中加入我们的逻辑。以身份验证为例，我们可以检查请求中的 cookie 来验证用户身份：

javascript
// pages/_middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
    const { cookies } = request;
  
    // 假设我们的登录令牌存储在 'auth-token' cookie 中
    if (cookies['auth-token']) {
        // 用户已登录，继续进行
        return NextResponse.next();
    } else {
        // 用户未登录，重定向到登录页面
        return NextResponse.redirect('/login');
    }
}

步骤 3: 测试中间件

现在你的中间件准备好了，启动你的 Next.js 应用并尝试访问任何页面。如果你没有 'auth-token' cookie，你应该被重定向到登录页面。

启动开发服务器，通常通过命令：

bash
npm run dev

然后，尝试在浏览器中导航到你的应用的不同页面，观察中间件的行为。

步骤 4: 部署

在确保中间件按预期工作后，你可以像部署其他 Next.js 应用一样部署你的应用。如果你使用的是 Vercel 平台，中间件会自动与你的应用一起部署。

结语

Next.js,的中间件为我们提供了在处理请求和渲染页面之间的一个强大的扩展点。它的用途不仅仅局限于身份验证和重定向，而是任何需要在请求生命周期的特定时刻介入的逻辑。

要高效地使用 Next.js 中间件，你需要对 Next.js 的路由系统有深入的理解，并了解如何根据不同的请求条件执行不同的操作。中间件的运行环境既可以是 Node.js 服务器，也可以是边缘网络（如 Vercel Edge Network），这将提供更接近用户的响应，从而减少延迟。

Next.js 团队通过提供中间件这一概念，进一步增强了框架的灵活性，让开发者能够以最少的配置，执行最复杂的请求处理策略。随着 Next.js 的不断演进，我们可以期待中间件会变得更加强大，为开发者提供更多的可能性。

标签：

Next.js