Fullstackwebapps met Next.js 15 · Les

Rate limiting en API-foutafhandeling

Bescherm uw Next.js-route handlers met rate limiting en retourneer consistente, goed gestructureerde foutreacties met de juiste HTTP-statuscodes.

Les 4 van 413 stappen

Rate limiting en API-foutafhandeling is een gratis Fullstackwebapps met Next.js 15-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Fullstackwebapps met Next.js 15. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Waarom snelheid begrenzen

Openbare API-routes zijn kwetsbaar voor misbruik: inlogpogingen met brute force, scraping en onbedoelde stortvloeden van verzoeken. Snelheidsbegrenzing beperkt hoeveel verzoeken een client binnen een tijdsvenster mag doen en beschermt zo je backend en de quota van externe diensten.

De client identificeren

Je hebt een sleutel nodig om verzoeken per client te tellen. Veelgebruikte keuzes zijn het IP-adres, een API-sleutel of de ID van de geauthenticeerde gebruiker. Lees in routehandlers het IP-adres uit headers die door je platform zijn ingesteld.

export async function GET(req) {
  const ip = req.headers.get('x-forwarded-for') ?? 'unknown';
  return Response.json({ ip });
}

Een teller met een vast venster

Het eenvoudigste algoritme telt verzoeken per sleutel binnen een vast tijdsvenster. Zodra de teller de limiet overschrijdt, wijs je verdere verzoeken af totdat het venster opnieuw begint.

function fixedWindow(store, key, limit, windowMs) {
  const now = Date.now();
  const entry = store[key] || { count: 0, reset: now + windowMs };
  if (now > entry.reset) { entry.count = 0; entry.reset = now + windowMs; }
  entry.count++;
  store[key] = entry;
  return entry.count <= limit;
}

De begrenzer uitproberen

Voer de logica voor het vaste venster lokaal uit om te zien hoe verzoeken eerst worden toegestaan en daarna geblokkeerd.

function fixedWindow(store, key, limit, windowMs) {
  const now = Date.now();
  const entry = store[key] || { count: 0, reset: now + windowMs };
  if (now > entry.reset) { entry.count = 0; entry.reset = now + windowMs; }
  entry.count++;
  store[key] = entry;
  return entry.count <= limit;
}
const store = {};
for (let i = 0; i < 4; i++) {
  console.log(i, fixedWindow(store, 'ip1', 3, 1000));
}

In geheugen versus gedistribueerd

Een opslag in het geheugen wordt bij elke koude start leeggemaakt en niet gedeeld tussen serverloze instanties. Gebruik voor echte implementaties een gedeelde opslag zoals Redis (bijvoorbeeld Upstash), zodat limieten overal consistent zijn.

429 teruggeven

Wanneer een client de limiet overschrijdt, antwoord je met HTTP 429 Too Many Requests en een header Retry-After die aangeeft wanneer de client het opnieuw kan proberen.

export async function POST(req) {
  if (!allowed) {
    return new Response('Rate limit exceeded', {
      status: 429,
      headers: { 'Retry-After': '60' },
    });
  }
  return Response.json({ ok: true });
}

Een consistente foutstructuur

Clients kunnen fouten gemakkelijker verwerken wanneer elke fout dezelfde JSON-structuur heeft. Gebruik een kleine, gestandaardiseerde envelop.

function apiError(message, status, code) {
  return Response.json(
    { error: { message, code } },
    { status }
  );
}

Fouten aan statuscodes koppelen

Kies de status die bij de oorzaak past:

400 ongeldige invoer
401 niet geauthenticeerd
403 niet geautoriseerd
404 niet gevonden
429 snelheidslimiet overschreden
500 serverfout

Onverwachte fouten opvangen

Wikkel de handlerlogica in try/catch, zodat een onverwerkte uitzondering verandert in een gecontroleerde 500 in plaats van een uitgelekte stacktrace.

export async function GET() {
  try {
    const data = await loadData();
    return Response.json(data);
  } catch (e) {
    console.error(e);
    return Response.json({ error: { message: 'Internal error' } }, { status: 500 });
  }
}

Herbruikbare wrapper

Haal de standaardcode naar een higher-orderfunctie die snelheidsbegrenzing en foutafhandeling toepast op elke handler.

function withGuards(handler) {
  return async (req) => {
    if (!checkLimit(req)) return apiError('Too many requests', 429);
    try { return await handler(req); }
    catch { return apiError('Internal error', 500); }
  };
}

Interne details nooit uitlekken

Stuur in productie nooit onbewerkte foutmeldingen, stacktraces of SQL-details naar de client. Log ze aan de serverzijde en geef een algemene melding met een stabiele foutcode terug.

Korte controle

Welke HTTP-statuscode en header geven het best aan dat een client de snelheidslimiet heeft overschreden?

Beantwoord dit in de interactieve les

Samenvatting

Je hebt je API-routes beter beveiligd:

Clients geïdentificeerd en verzoeken geteld met een begrenzer met een vast venster.
429 met Retry-After teruggegeven en de voorkeur gegeven aan Redis voor gedistribueerde limieten.
Een JSON-foutenvelop gestandaardiseerd en oorzaken aan statuscodes gekoppeld.
Uitzonderingen opgevangen en het uitlekken van interne details voorkomen.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Rate limiting en API-foutafhandeling” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Fullstackwebapps met Next.js 15, waaronder “Rate limiting en API-foutafhandeling”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Fullstackwebapps met Next.js 15 bevat in totaal 4 lessen.

Wat leer ik in “Rate limiting en API-foutafhandeling”?

Bescherm uw Next.js-route handlers met rate limiting en retourneer consistente, goed gestructureerde foutreacties met de juiste HTTP-statuscodes. Je oefent met Fullstackwebapps met Next.js 15 door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Fullstackwebapps met Next.js 15 te beginnen?

Ervaring vooraf is niet nodig. Fullstackwebapps met Next.js 15 op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Rate limiting en API-foutafhandeling”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Fullstackwebapps met Next.js 15?

Ja. Elke les over Fullstackwebapps met Next.js 15 bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Fullstackwebapps met Next.js 15