Bygger digitala upplevelser med passion

”Enkelhet är effektivitetens själ.” – Austin Freeman

Komma i kontakt

GitHubGmail iconEmailLinkedIn

© 2026 Abel Sintaro. Alla rättigheter förbehållna

Tillbaka till tekniska

Proxy-mönster i Next.js 16

Frontend
February 16, 2026

I och med lanseringen av Next.js 16 har sättet vi hanterar delegering av förfrågningar skiftat från monolitisk middleware mot mer granulära Proxy-mönster. Även om middleware är utmärkt för autentisering och bot-detektering, leder användningen av det för tung "request rewriting" ofta till en uppsvälld middleware-fil och ökad latens vid kallstarter (cold starts).

Middleware-konflikten

I komplexa applikationer blir ofta en enskild middleware.ts-fil en flaskhals. När flera rutter kräver olika logik för omskrivning – särskilt i internationaliserade (i18n) miljöer – blir logikgrenar svåra att underhålla.

  • Lokaliserade Proxies: Genom att flytta proxy-logiken närmare rutt-segmentet minskas exekveringskostnaden för orelaterade rutter.

  • Edge-kompatibilitet: Moderna proxier måste förbli lätta för att kunna köras i de begränsade miljöerna i Edge Runtimes utan att dra in tunga Node.js-beroenden.

Implementering: Proxy-mönstret

Med Next.js 16 kan vi implementera ett rent proxy-mönster som hanterar vidarebefordran av förfrågningar samtidigt som vi behåller full kontroll över headers och säkerhet. Detta är särskilt användbart för att tunnla API-anrop för att kringgå CORS eller för att dölja interna mikrotjänst-arkitekturer.

TypeScript

Infrastruktur och överväganden

När dessa mönster distribueras i stor skala bör du överväga dessa tre prestandapelare:

  1. Header-rensning: Ta alltid bort känsliga "hop-by-hop" headers (som keep-alive eller transfer-encoding) innan vidarebefordran för att undvika 502-fel.

  2. Stöd för strömning: Säkerställ att din proxy stöder ReadableStream för att förhindra "Buffer and Wait"-antimönstret, vilket förstör TTFB (Time to First Byte).

  3. Circuit Breaking: Implementera en timeout-strategi. Om den proxade tjänsten tar >30s kommer Edge-funktionen att avbrytas, vilket kan lämna klienten i ett hängande tillstånd.

Slutsats

Proxy-mönster i Next.js 16 erbjuder ett robust sätt att koppla bort din frontend från komplexa backend-krav. Genom att flytta ut denna logik från den globala middleware-filen och in i dedikerade "route handlers" uppnår du bättre prestanda, tydligare felsökning och en mer underhållsvänlig kodbas.

typescript
// app/api/proxy/[...path]/route.ts
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function ALL(req: NextRequest) {
  const targetUrl = new URL(req.nextUrl.pathname.replace('/api/proxy', ''), 'https://api.internal.service');
  
  // Vidarebefordra sökparametrar
  targetUrl.search = req.nextUrl.search;

  const response = await fetch(targetUrl, {
    method: req.method,
    headers: {
      'Authorization': `Bearer ${process.env.INTERNAL_TOKEN}`,
      'Content-Type': 'application/json',
      'X-Forwarded-For': req.ip || 'unknown',
    },
    body: req.body,
    duplex: 'half', // Krävs för strömmande bodies i Next.js 16
  });

  return response;
}