Cara Marketer Indonesia Pasang Rate Limiting API di Next.js untuk Lindungi Form Lead dan Pangkas Biaya Bot Spam 78 Persen di 2026
TL;DR: Rate limiting di Next.js Edge Middleware membatasi jumlah request per IP atau token dalam jendela waktu tertentu, sehingga bot tidak bisa spam form lead atau API publik Anda. Dengan sliding window 5 request per menit per IP, Vito Atmo menurunkan submission bot di proyek Atmo LMS sebesar 78 persen dan memangkas biaya verifikasi email validator dari Rp 1,2 juta menjadi Rp 270 ribu per bulan.
Bulan lalu saya audit form pendaftaran webinar di salah satu proyek client. Logs menunjukkan satu IP dari Eropa Timur mengirim 1.840 submission dalam 3 jam, semuanya pakai email throwaway. Biaya email validator melonjak dan list quality hancur. Solusinya bukan CAPTCHA yang merusak konversi, tapi rate limiting di lapisan edge.
Banyak marketer Indonesia mengandalkan reCAPTCHA atau Cloudflare Turnstile, padahal Next.js sejak versi 13 sudah punya Edge Middleware yang bisa intercept request sebelum sampai ke API route. Dengan sedikit kode, bot spam berhenti di pintu masuk tanpa user manusia merasakan friksi.
Masalah: Form Lead Jadi Magnet Spam
Setiap form publik tanpa rate limit adalah target empuk untuk credential stuffing, scraping, dan email enumeration. Dampak nyatanya: list pelanggan tercemar email palsu, biaya verifikasi naik, dan deliverability email blast turun karena bounce rate tinggi.
Dalam kasus Atmo LMS, form daftar webinar awalnya menerima rata-rata 12 submission valid per hari, tapi log menunjukkan 340-an attempt dari 5 IP yang sama. CAPTCHA awalnya dipasang, tapi conversion rate turun 18 persen karena user mobile kesulitan menyelesaikan teka-teki.
Framework: Sliding Window Rate Limit di Edge
Solusi yang akhirnya saya pakai adalah sliding window dengan Upstash Redis di Edge Middleware. Berikut alur kerjanya:
| Komponen | Fungsi |
|---|---|
middleware.ts | Intercept request sebelum routing |
Upstash Redis | Counter dengan TTL otomatis (serverless, gratis up to 10rb req/hari) |
Sliding Window | 5 request per menit per IP, reset bertahap |
Response 429 | Status "Too Many Requests" untuk bot |
Kode inti middleware.ts:
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
import { NextResponse } from "next/server";
const ratelimit = new Ratelimit({
redis: Redis.fromEnv(),
limiter: Ratelimit.slidingWindow(5, "60 s"),
});
export async function middleware(req) {
const ip = req.ip ?? "127.0.0.1";
const { success } = await ratelimit.limit(ip);
if (!success) return new NextResponse("Too Many Requests", { status: 429 });
return NextResponse.next();
}
export const config = { matcher: "/api/lead/:path*" };
Konfigurasi ini hanya membatasi route /api/lead/*, sehingga halaman publik tetap bebas. Penting: gunakan JWT untuk endpoint authenticated supaya rate limit per user, bukan per IP.
Studi Kasus: Atmo LMS Pangkas Spam 78 Persen
Setelah deploy, log monitoring selama 14 hari menunjukkan:
- Submission valid naik dari 12 ke 15 per hari (tanpa CAPTCHA yang menghambat user)
- Attempt total turun dari 340 ke 75 per hari
- Submission bot terblokir di edge: 78 persen pengurangan
- Biaya email validator turun dari Rp 1,2 juta ke Rp 270 ribu per bulan
- Latency request normal naik hanya 8 ms (dari 42 ke 50 ms p95)
Saya juga pasang HSTS dan CSP bersamaan supaya stack security konsisten. Vetmo dan Nalesha kemudian mengadopsi pattern serupa, masing-masing turun 65 dan 71 persen spam dalam bulan pertama.
Pertanyaan Umum
Apakah rate limiting menggantikan CAPTCHA?
Untuk sebagian besar kasus form lead, ya. CAPTCHA tetap berguna untuk endpoint sangat sensitif (login, pembayaran). Tapi rate limiting cukup melindungi form newsletter, kontak, dan webinar tanpa mengorbankan UX.
Bagaimana kalau bot ganti IP terus?
Tambahkan dimensi lain ke key rate limit: fingerprint header (User-Agent + Accept-Language), atau token CSRF per session. Sliding window bisa pakai composite key supaya rotasi IP tetap ketahuan.
Apakah Upstash Redis aman untuk traffic Indonesia?
Ya. Upstash punya region Singapore dan Mumbai, latency dari Indonesia umumnya di bawah 30 ms. Free tier mencakup 10.000 request/hari, cukup untuk form lead skala UMKM hingga menengah.
Aksi Konkret untuk Marketer
Mulai dari endpoint paling rentan (form lead, login, search publik), pasang rate limit 5-10 request per menit per IP. Monitor selama 7 hari, sesuaikan threshold berdasarkan pola traffic. Bandingkan biaya email validator atau bandwidth sebelum dan sesudah, lalu hitung payback period. Untuk konsultasi implementasi spesifik stack Next.js Anda, hubungi Vito Atmo.
Referensi lebih lanjut: Vercel Edge Middleware docs dan OWASP API Security Top 10.
Artikel Terkait
Website Bisnis
Cara Marketer Indonesia Pasang CSS field-sizing di Next.js untuk Form Feedback Auto-Grow Pangkas Bundle 11 KB dan INP dari 240 ke 95 ms di 2026
Panduan teknis pasang CSS field-sizing native di Next.js untuk textarea feedback dan komentar. Hemat library auto-grow, naikkan INP, dan kurangi long task di mobile.
Website Bisnis
Cara Marketer Indonesia Kalibrasi Prerender Trigger Rate di Next.js dari 9 ke 47 Persen dan Pangkas LCP Navigasi ke 90 ms di 2026
Panduan praktis kalibrasi Speculation Rules API di Next.js 15 lewat metrik Prerender Trigger Rate, memangkas LCP navigasi ke bawah 100 ms tanpa boros memori user.
Website Bisnis
Cara Marketer Indonesia Pasang CSS Relative Color Syntax di Next.js untuk Pangkas Design Token dari 47 ke 9 Variable dan Dark Mode Otomatis di 2026
Relative Color Syntax derive shade warna langsung di CSS, hapus kebutuhan SCSS atau variable manual. Praktik dari refactor design system Atmo LMS.
Butuh website yang benar-benar bekerja?
Hubungi Vito untuk konsultasi gratis 15 menit.
WhatsApp Sekarang