Next.js 如何同时使用多个中间件

乐闻

2024年05月10日 10:49· 阅读 27

前言

中间件是 Next.js 中一个强大的功能，它允许开发者在服务器端和静态生成的页面之间加入定制的逻辑。在 Next.js 应用中，可能需要使用多个中间件来处理不同的任务，比如身份验证、日志记录、设置Cookies等。

在本教程中，将详细记录如何在 Next.js 项目中同时使用多个中间件。

使用步骤

一、在 `pages` 目录中创建 API 路由

在 pages/api 目录下创建文件来定义 API 路由。例如，创建一个 hello.js文件：

javascript
// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello!' });
}

二、创建中间件

Next.js 支持在 pages/_middleware.js 或者在 API 路由内部使用中间件。在这个例子中，我们将在 API 路由内部使用中间件。

首先，创建一个中间件目录 middlewares 在项目的根目录下，并创建两个中间件文件：

bash
mkdir middlewares
touch middlewares/logger.js
touch middlewares/authenticator.js

现在我们定义两个中间件：

日志记录中间件 (middlewares/logger.js):

javascript
// middlewares/logger.js
export function logger(req, res, next) {
  console.log(`${req.method} ${req.url}`);
  next();
}

身份验证中间件 (middlewares/authenticator.js):

javascript
// middlewares/authenticator.js
export function authenticator(req, res, next) {
  // 在这里可以添加你的身份验证逻辑
  const isAuthenticated = true; // 假设用户已经验证
  
  if (isAuthenticated) {
    next();
  } else {
    res.status(403).json({ message: 'Unauthorized' });
  }
}

在这些中间件中，next 参数是一个函数，它将控制转移到下一个中间件或路由处理程序。

三、结合中间件与 API 路由

接下来，我们将结合这些中间件到我们的 API 路由中。修改 pages/api/hello.js 如下：

javascript
// pages/api/hello.js
import { logger } from '../../middlewares/logger';
import { authenticator } from '../../middlewares/authenticator';

function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result);
      }
      return resolve(result);
    });
  });
}

export default async function handler(req, res) {
  // 使用日志记录中间件
  await runMiddleware(req, res, logger);

  // 使用身份验证中间件
  await runMiddleware(req, res, authenticator);

  // 在这里写API的逻辑...
  res.status(200).json({ message: 'Hello!' });
}

这里的 runMiddleware 函数是一个辅助函数，它使得我们可以以 await 的形式使用中间件，这使得代码更加清晰和简洁。这个函数接收请求(req)、响应(res)对象和一个中间件(fn)，并返回一个 Promise。

四、测试你的中间件

现在你可以通过启动 Next.js 应用来测试你的中间件：

bash
npm run dev

访问 http://localhost:3000/api/hello，你应该看到在控制台中输出日志，并,接收到 Hello 的响应，因为你的中间件已经运行并允许请求通过。

进阶用法

1. 中间件的错误处理

当你有多个中间件时，错误处理变得至关重要。每个中间件应该能够处理错误，并将错误传递到下一个中间件或者最终用户。

修改 runMiddleware 函数，添加错误处理的逻辑：

javascript
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        res.status(500).json({ message: result.message });
        return reject(result);
      }
      return resolve(result);
    });
  });
}

通过这种方式，如果任何中间件引发错误，它会自动返回一个 500 状态码和错误信息给客户端。

2. 优化中间件的组合

你可能会注意到，随着你应用中间件数量的增加，每次手动调用 runMiddleware 可能会使得代码冗长和难以管理。为了解决这个问题，可以创建一个函数来组合中间件：

javascript
// middlewares/compose.js
export function compose(...middlewares) {
  return async (req, res) => {
    for (let middleware of middlewares) {
      await runMiddleware(req, res, middleware);
    }
  };
}

现在，你可以简化 pages/api/hello.js 中的中间件使用：

javascript
// pages/api/hello.js
import { logger } from '../../middlewares/logger';
import { authenticator } from '../../middlewares/authenticator';
import { compose } from '../../middlewares/compose';

const middleware = compose(logger, authenticator);

export default async function handler(req, res) {
  try {
    // 应用中间件
    await middleware(req, res);

    // 在这里写 API 的逻辑...
    res.status(200).json({ message: 'Hello!' });
  } catch (error) {
    // 错误处理留给 runMiddleware 函数
  }
}

使用 compose 函数，你可以轻松地添加或移除中间件，而不需要修改 handler 函数本身。

3. 考虑服务器端和客户端路由

目前我们讨论的中间件是用于 API 路由的，但 Next.js 的中间件也可以运行在服务器端页面渲染过程中，甚至在客户端导航时触发。

如果你想要在页面级别使用中间件，可以在 pages/_middleware.js 中定义它，并利用 Next.js 提供的 NextResponse 对象来控制请求响应：

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

export async function middleware(req) {
  await logger(req);
  await authenticator(req);

  return NextResponse.next();
}

注意，这里的中间件和 API 路由中间件有些不同，它们不接收 res 参数，并且返回的是 NextResponse 对象。

总结

在 Next.js 中使用多个中间件可以极大地提高应用的灵活性和可维护性。通过组合不同的中间件，你可以为你的应用添加各种功能，如日志记录、身份验证等。记住，优雅地组织和管理这些中间件是保持代码清晰和可维护的关键。

标签：

Next.js