docs: update vercel edge example to use the new api (#13)

.gitignore

@@ -3,10 +3,11 @@ dist
 .env
 redis-server
 
-./**/yarn.lock
-./**/package-lock.json
-./**/pnpm-lock.yaml
+**/yarn.lock
+**/package-lock.json
+**/pnpm-lock.yaml
 
 *.log
 .vercel
-.next
+.next
+

examples/nextjs/middleware.ts

@@ -0,0 +1,33 @@
+import { NextFetchEvent, NextRequest, NextResponse } from "next/server";
+import { Ratelimit } from "@upstash/ratelimit";
+import { Redis } from "@upstash/redis";
+
+const ratelimit = new Ratelimit({
+  redis: Redis.fromEnv(),
+  limiter: Ratelimit.fixedWindow(10, "10 s"),
+});
+
+export default async function middleware(
+  request: NextRequest,
+  event: NextFetchEvent,
+): Promise<Response | undefined> {
+  const ip = request.ip ?? "127.0.0.1";
+
+  const { success, pending, limit, reset, remaining } = await ratelimit.limit(
+    `mw_${ip}`,
+  );
+  event.waitUntil(pending);
+
+  const res = success
+    ? NextResponse.next(request)
+    : NextResponse.rewrite(new URL("/api/blocked", request.url), request);
+
+  res.headers.set("X-RateLimit-Limit", limit.toString());
+  res.headers.set("X-RateLimit-Remaining", remaining.toString());
+  res.headers.set("X-RateLimit-Reset", reset.toString());
+  return res;
+}
+
+export const config = {
+  matcher: "/api/hello",
+};

examples/nextjs/package.json

@@ -8,8 +8,8 @@
   },
   "dependencies": {
     "@upstash/ratelimit": "../../dist",
-    "@upstash/redis": "^1.4.0",
-    "next": "^12.1.6",
+    "@upstash/redis": "latest",
+    "next": "^12.2.5",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },

examples/nextjs/pages/api/blocked.ts

@@ -0,0 +1,9 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(
+  _req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  res.status(429);
+  return res.end();
+}

examples/nextjs/pages/api/hello.ts

@@ -0,0 +1,8 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+
+export default function handler(
+  _req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  return res.json({ hello: "world" });
+}

examples/nextjs/pages/index.tsx

@@ -1,15 +1,17 @@
 import type { NextPage } from "next";
+import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 const Home: NextPage = () => {
   const [response, setResponse] = useState<Record<string, unknown> | null>(
     null,
   );
 
+  const router = useRouter();
   useEffect(() => {}, []);
 
   const generate = async () => {
-    const res = await fetch("/api");
+    const res = await fetch("/api/hello");
 
     if (res.ok) {
       setResponse({
@@ -24,6 +26,7 @@ const Home: NextPage = () => {
     } else {
       console.log(JSON.stringify(res.headers, null, 2));
       setResponse(null);
+
       alert(
         `Ratelimit reached, try again after ${
           new Date(