使用 Next.js 中间件快速摆脱恼人的机器人

你好。是努科助。

你有没有被机器人访问困扰过？

我有

我开发的网站但是机器人正在获得大量访问权限。
Next.js の Middleware を使ってサクッと迷惑 Bot たちを追い払う

很麻烦，因为如果你请求一个页面，额外的请求比如图片和js文件也会运行。
我的网站由Cloud Run 运营，但由于费用是根据请求按比例添加的，我想减少来自机器人的不必要请求并善待我的钱包。

另一方面，Middleware 功能Middleware 在Next.js 的 12.2 版本中作为稳定版本发布。

有了这个Middleware 函数，当用户有请求时，可以在返回页面之前执行代码.
例如，您可以确定用户代理和重定向、应用基本身份验证等。

这次，使用Middleware 摆脱这些烦人的机器人.

这很容易做到。

在public 目录下为机器人准备html 文件。
将middleware.js（ts）放在项目根目录下，写20行左右的代码。
是的，结束了。
然后你可以像这样返回状态码 403（禁止）。

我会详细解释。

1.在public目录下准备好Bot的html文件。

准备要为机器人显示的 html 文件。
例如，准备以下403.html 并将其放在public 下。
403.html
```
<html lang='ja'>
  <head>
    <title>Forbidden</title>
    <meta name='robots' content='noindex' />
  </head>
  <body>
    <p>
      Forbidden
    </p>
  </body>
</html>
```
您不必准备花哨的 html，因为它是机器人的对手。

2、将middleware.js（ts）放在项目根下，写20行左右的代码。

使用Next.js，您可以通过将middleware.js（TypeScript 为middleware.ts）直接放在项目的根目录下来使用Middleware 功能。
让我们有这样的middleware.js：
中间件.js
```
import { NextResponse, userAgent } from 'next/server';

// 追い払いたい Bot たち
const uaBlackList = Object.freeze([
  'PetalBot',
  'SemrushBot',
]);

export function middleware(req) {
  const { ua } = userAgent(req);
  // robot.txt へのアクセスは除く
  if (
    uaBlackList.some((blackUa) => ua.indexOf(blackUa) > -1) &&
    req.nextUrl.pathname !== '/robots.txt'
  ) {
    req.nextUrl.pathname = '/403.html';
    return NextResponse.rewrite(req.nextUrl, { status: 403 });
  }
  return NextResponse.next();
}
```
当访问来自预定义黑名单中的机器人时，此middleware.js 显示403.html，否则页面正常显示。

部署到生产环境就完成了。
当您将用户代理伪装成机器人访问该页面时，将显示以下屏幕。

[题外话] 你不想为Next.js而不是html显示自定义错误页面吗？

这是一个题外话，所以跳过它是可以的。

Next.js 能够像 pages/404.jsx 一样显示自定义错误页面，但是我不使用这个.

因为如果您显示自定义错误页面，其他请求可能会来到middleware是。

例如，假设以下 jsx 定义在所有页面通用的_document.jsx 中。
_document.jsx
```
export default function Document() {
  return (
    <Html lang='ja'>
      <Head>
        ...
        <link rel='icon' href='/images/icons/icon-16x16.png' sizes='16x16' type='image/png' />
        ...
      </Head>
      ...
    </Html>
  );
}
```
在这种情况下，即使访问来自 Bot 并且显示了pages/404.jsx，也会向/images/icons/icon-16x16.png 发送额外的请求。
如果可能的话，我想抑制来自不必要机器人的请求，所以我有一个像403.html 这样的静态文件。

概括
1. 在public 目录下为 Bot 准备 html 文件。
2. 将middleware.js（ts）放在项目根下，写大约20行代码。
  仅凭这一点，我们就能够快速抑制来自机器人的不必要访问。
  
  如果你想对Next.js的bot访问采取措施，请参考！

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308624086.html

使用 Next.js 中间件快速摆脱恼人的机器人

1.在`public`目录下准备好Bot的html文件。

2、将`middleware.js（ts）`放在项目根下，写20行左右的代码。

[题外话] 你不想为`Next.js`而不是html显示自定义错误页面吗？

概括

1.在public目录下准备好Bot的html文件。

2、将middleware.js（ts）放在项目根下，写20行左右的代码。

[题外话] 你不想为Next.js而不是html显示自定义错误页面吗？

概括

1.在`public`目录下准备好Bot的html文件。

2、将`middleware.js（ts）`放在项目根下，写20行左右的代码。

[题外话] 你不想为`Next.js`而不是html显示自定义错误页面吗？