Rate Limiting Next.js + Upstash: Biar API Gak Jebol!

Pernah Gak Sih API Lu Kena Spam Sampe Amsyong?

Lagi asik-asik ngopi sambil mantau dashboard Vercel, eh tiba-tiba traffic melonjak drastis. Bukannya seneng karena viral, lu malah panik karena ternyata itu serangan bot atau ada user 'kreatif' yang nge-spam API route lu ribuan kali per detik. Kalo dibiarin, database lu bisa nangis, atau yang paling parah, tagihan pay-as-you-go lu bisa bikin dompet menjerit. Waduh, gawat kan lur?

Nah, di sinilah Rate Limiting jadi pahlawan kesiangan kita. Singkatnya, rate limiting itu kayak bouncer di club malam. Dia yang nentuin siapa yang boleh masuk dan seberapa sering mereka boleh masuk. Kalo ada yang maksa masuk terus-menerus, si bouncer bakal bilang, 'Eh bro, santai dulu, balik lagi nanti ya!'. Di dunia web, kita biasanya ngasih response status code 429 alias Too Many Requests.

Tapi masalahnya, implementasi rate limiting di lingkungan serverless kayak Next.js (Vercel) itu agak tricky. Kita gak bisa cuma simpen variabel di memori karena serverless itu sifatnya stateless. Makanya, kita butuh database eksternal yang super kenceng buat nyimpen data request tadi. Dan di sinilah Upstash Redis masuk sebagai solusi paling mantap jiwa dan yang paling penting: GRATIS!

Kenapa Harus Upstash Redis?

Mungkin lu nanya, 'Kenapa gak pake Redis biasa aja, Bang?'. Jawabannya simpel: Serverless compatibility. Upstash itu didesain khusus buat aplikasi serverless. Mereka pake protokol HTTP, jadi lu gak perlu pusing mikirin koneksi TCP yang sering putus-nyambung kayak hubungan lu sama mantan. Selain itu, Upstash punya tier gratisan yang cukup banget buat proyek sampingan atau startup kecil-kecilan. Gak perlu input kartu kredit pas daftar, jadi aman buat kita-kita yang mager urusan administrasi.

Persiapan Tempur

Sebelum kita masuk ke kodingan, pastiin lu udah punya akun di Upstash. Kalo belum, buruan daftar gaskeun! Setelah daftar, bikin database Redis baru. Pilih region yang paling deket sama deployment Next.js lu (misalnya Singapore biar gak lag). Kalo udah, lu bakal dapet UPSTASH_REDIS_REST_URL dan UPSTASH_REDIS_REST_TOKEN. Simpen baik-baik di file .env.local lu ya!

UPSTASH_REDIS_REST_URL="https://xxx-xxx-xxx.upstash.io"
UPSTASH_REDIS_REST_TOKEN="your_super_secret_token"

Step 1: Install Library yang Dibutuhin

Kita gak bakal bikin algoritma rate limiting dari nol (kecuali lu lagi pengen simulasi skripsi, wkwk). Kita pake library resmi dari Upstash yang udah dioptimasi banget. Buka terminal lu, terus sikat command ini:

npm install @upstash/ratelimit @upstash/redis

Step 2: Setup Rate Limiter

Sekarang kita bikin satu file utility, misalnya lib/ratelimit.ts. Di sini kita bakal konfigurasiin seberapa ketat bouncer kita bakal kerja. Kita bakal pake algoritma Sliding Window karena lebih adil buat user dibanding Fixed Window.

import { Redis } from "@upstash/redis";
import { Ratelimit } from "@upstash/ratelimit";

// Inisialisasi Redis
const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL,
  token: process.env.UPSTASH_REDIS_REST_TOKEN,
});

// Bikin rate limiter: 10 request per 10 detik
export const ratelimit = new Ratelimit({
  redis: redis,
  limiter: Ratelimit.slidingWindow(10, "10 s"),
  analytics: true,
  prefix: "@upstash/ratelimit",
});

Penjelasan singkat: Konfigurasi di atas artinya setiap 'identifier' (biasanya IP address) cuma dibolehin ngelakuin 10 request setiap 10 detik. Kalo lebih dari itu? Ya kena blokir sementara, lur!

Step 3: Implementasi di Middleware Next.js

Cara paling efisien buat pasang rate limiting di Next.js adalah lewat Middleware. Kenapa? Karena request bakal dicek sebelum nyampe ke API route atau page lu. Jadi kalo emang mau diblokir, gak bakal makan resource server lu lebih dalem. Mantap kan?

Bikin file middleware.ts di root project lu:

import { NextRequest, NextResponse } from "next/server";
import { ratelimit } from "./lib/ratelimit";

export default async function middleware(request: NextRequest) {
  // Ambil IP address user
  const ip = request.ip ?? "127.0.0.1";

  // Cek limit
  const { success, limit, reset, remaining } = await ratelimit.limit(ip);

  // Kalo gagal (limit abis), kasih response 429
  if (!success) {
    return new NextResponse("Waduh, pelan-pelan pak supir! Lu nge-spam ya?", {
      status: 429,
      headers: {
        "X-RateLimit-Limit": limit.toString(),
        "X-RateLimit-Remaining": remaining.toString(),
        "X-RateLimit-Reset": reset.toString(),
      },
    });
  }

  return NextResponse.next();
}

// Tentukan route mana aja yang mau diproteksi
export const config = {
  matcher: "/api/:path*",
};

Gimana Cara Kerjanya?

Jadi gini lur, setiap kali ada request masuk ke /api/..., middleware bakal jalan. Dia ngambil IP address si pengirim, terus nanya ke Upstash Redis: 'Eh, IP ini udah berapa kali request dalam 10 detik terakhir?'.

Si Redis bakal ngejawab dengan cepet (biasanya < 10ms kalo region-nya bener). Kalo success itu true, request dilanjutin ke API route lu. Tapi kalo false, kita langsung tembak balik pake status 429. User yang kena blokir juga bakal dapet info di header soal kapan limitnya bakal di-reset. Jadi mereka gak bakal bingung kenapa tiba-tiba gak bisa akses.

Tips Tambahan Biar Makin Pro

• Pake User ID: Kalo aplikasi lu ada sistem login, mending pake userId sebagai identifier gantiin IP. Soalnya IP bisa berubah-ubah atau satu IP bisa dipake rame-rame (misal di kantor atau sekolah).
• Beda Route, Beda Limit: Lu bisa bikin beberapa instance ratelimit. Misal buat /api/login dibikin ketat banget (5 request per menit), tapi buat /api/data-publik dibikin agak longgar.
• Handling UI di Frontend: Jangan lupa di sisi frontend, lu harus handle kalo dapet error 429. Kasih notifikasi yang enak dibaca, jangan cuma console.log doang, kasian user-nya wkwk.

Implementasi ginian tuh sebenernya investasi biar lu bisa tidur nyenyak di malem hari tanpa takut server meledak. Apalagi Upstash ngasih dashboard yang kece banget buat mantau traffic lu secara real-time. Lu bisa liat siapa yang paling hobi nge-spam API lu.

Gimana? Gampang banget kan? Gak perlu setup server Redis sendiri yang ribetnya minta ampun. Tinggal klik-klik di dashboard Upstash, install library, pasang middleware, kelar urusan! API aman, hati tenang, dompet pun senang.

Kira-kira menurut lu, fitur apa lagi sih yang wajib dipasang di API Next.js biar makin aman dari serangan tangan jahil?

FAQ (Pertanyaan Umum)