Next.js 中间件

引入中间件

Next.js 中间件是用于处理请求和响应的工具。通过使用中间件，可以实现诸如路由重写、头部操作、请求和响应体修改等功能。中间件提供了一种更灵活的方式来控制应用的行为，而无需依赖复杂的服务器配置。

中间件的基本概念

中间件是在请求到达页面之前或响应发送到客户端之后执行的一段代码。它允许开发者在请求和响应过程中插入自定义逻辑。例如，可以通过中间件来验证用户身份、修改请求或响应头、记录日志等。

安装与配置

Next.js 中间件默认情况下已内置支持，无需额外安装任何库或插件。只需在项目根目录下创建一个名为 middleware.js 或 middleware.ts 的文件即可开始使用。

// middleware.js
export default function middleware(req, ev) {
  // 自定义逻辑
}

中间件的生命周期

中间件可以在不同的生命周期阶段运行，这取决于它们被放置的位置以及如何配置。主要的生命周期阶段包括：

• 请求到达页面之前：在此阶段，你可以访问并修改请求对象。
• 响应发送到客户端之前：在此阶段，你可以访问并修改响应对象。
• 页面渲染之后：在此阶段，你可以根据渲染结果进一步处理请求或响应。

请求与响应对象

请求对象 (req)

请求对象包含了客户端发起请求时的所有信息。它提供了多种方法来获取请求的详细信息，如 URL、头部、查询参数等。

获取 URL 和路径

export default function middleware(req, ev) {
  const url = req.nextUrl;
  console.log(url.pathname); // 输出请求路径
}

获取查询参数

export default function middleware(req, ev) {
  const searchParams = req.nextUrl.searchParams;
  console.log(searchParams.get('paramName')); // 输出查询参数值
}

响应对象 (res)

响应对象用于修改返回给客户端的数据。常见的操作包括设置响应头、重定向、返回特定状态码等。

设置响应头

export default function middleware(req, ev) {
  ev.res.setHeader('X-Custom-Header', 'Custom Value');
}

重定向

export default function middleware(req, ev) {
  ev.res.redirect('/new-path');
}

返回特定状态码

export default function middleware(req, ev) {
  ev.res.status(404).send('Not Found');
}

路由重写

中间件还可以用来重写路由，将请求重定向到不同的页面或路径。这对于构建更复杂的路由系统非常有用。

export default function middleware(req, ev) {
  if (req.nextUrl.pathname.startsWith('/old')) {
    return new Response('Old path found!', { status: 404 });
  }
  return null; // 默认行为，不进行重写
}

示例：用户认证

假设我们需要对所有非公开页面实施用户认证。我们可以编写一个中间件来检查用户是否已经登录，并根据结果决定是否允许访问页面。

import { withAuth } from 'next-auth/middleware';

export default withAuth({
  callbacks: {
    authorized: ({ token }) => !!token,
  },
});

注意事项

• 确保中间件文件名正确，为 middleware.js 或 middleware.ts。
• 中间件的顺序很重要，Next.js 按照文件名字母顺序加载中间件。
• 如果需要在中间件中访问数据库或其他外部服务，请确保这些操作是异步安全的。

通过以上介绍，你应该对 Next.js 中间件有了基本的认识和理解。接下来，你可以尝试在自己的项目中应用这些知识，构建更加复杂和功能丰富的应用。