在Next.js项目中使用Upstash限流
如何在Next.js中限流
限流是 web 应用中十分重要的功能。但在 Next.js 生态中，实现 API 限流是相当容易的。这篇博客我将主要介绍如何使用 Upstash 和 Redis 实现 API 限流.
什么是 Upstash ?
Upstash 是一个 serverless 数据堆栈，它可以通过 Redis 或 Qstash 在 edge 为你的网站实现限流. 大部分人更倾向于使用 Redis，主要是 Upstash 的免费计划真的很香. 我将使用 Upstash 来限流，因为它的API使用起来非常简单.
首先，你需要注册一个账户. 完成注册后，点击控制台并创建一个新的数据库. 为其命名，并将区域设置为您所在地区的正确区域（推荐新加坡）, 然后创建 Redis .
设置ENV
现在你的 Redis 实例已经创建，还需要在环境变量中设置 Redis REST URL 和token. 你可以从 Upstash 控制台复制这些信息。
现在打开 VSCode 并添加一个 .env 文件在你的主目录下, 如果有跳过这步. 将 Upstash URL 和 token 复制粘贴到文件中。
使用Clerk进行身份验证
如果你之前没有使用过 Clerk，它是一个用户身份验证和管理系统，支持诸如 Next.js、Remix 和 Gatsby 等框架。在我的项目中是用 Clerk 进行用户身份验证和保护路由。
因为为了限流，需要一个用于识别用户的标识符（例如用户ID、IP地址），以确定是否同一用户在发起多个请求. Clerk 中用户的 ID 就可以可以很好的达到目的.
创建 Rate Limiter
首先，我们需要安装两个包，分别是 upstash-rate-limit 和 upstash-redis. 你可以通过运行以下命令进行安装:
然后，在你的路由中导入这两个包并初始化速率限制器:
这个例子设置了每 3 秒内允许的请求次数为 2. 你可以根据需要调整这些值。
在路由中实现Rate Limiter
我将在我项目的路中实现速率限制器. 首先，创建你的路由（此处，我将其称为 expensive）. 在路由内部，使用 Clerk 中的用户 ID 来识别并进行速率限制。
上面代码先检查用户请求是否超出了速率限制； 如果是，就会抛出错误.
测试 Rate Limiter
实现限流后，你可以测试下所限流的路由, 确保速率限制正常工作。我是在网页上加了个按钮来测试速率限制器。
之后便运行 npm run dev ，然后导航到本地主机 URL。 单击该按钮，使用 Clerk 登录，然后会被重定向到受保护的页面。 打开浏览器控制台并刷新页面, 当你刷新过于频繁，就会显示“ TOO_MANY_REQUESTS ”错误。
如果等待几秒钟再刷新，错误应该会消失，表明网站限流成功。
总结
可以看到使用 Upstash 和 Redis 实现限流，非常容易。但这种猫和老鼠的游戏，其实也没有一劳永逸的办法，最后还是得在自己的服务端做好安全防护
