0 Tage Serie
javascript / expert
Snippet

Implementierung einer erweiterbaren Middleware-Pipe mit funktionaler Komposition

Mit wachsender Next.js-Middleware wird die Verwaltung mehrerer Logikblöcke schwierig. Funktionale Komposition (Piping) ermöglicht es, Middleware-Funktionen wie eine Zwiebel zu kapseln und so eine saubere Trennung für Logging, Auth und Header zu gewährleisten.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { NextRequest, NextResponse } from 'next/server';
type Middleware = (next: Function) => (req: NextRequest) => Promise<NextResponse>;
const withCustomHeader: Middleware = (next) => async (req) => {
const res = await next(req);
res.headers.set('x-framework', 'nextjs-expert');
return res;
};
const pipe = (...middlewares: Middleware[]) => (final: Function) =>
middlewares.reduceRight((acc, m) => m(acc), final);
export default pipe(withCustomHeader)(async (req: NextRequest) => NextResponse.next());
nextjs
Erklärung
1
reduceRight((acc, m) => m(acc), final)
Wendet Middlewares in umgekehrter Reihenfolge an, um einen geschichteten Ausführungs-Stack zu erstellen (Onion-Pattern).
2
type Middleware = (next: Function) => ...
Definiert einen High-Order-Funktionstyp, der den nächsten Ausführungsschritt in der Kette kapselt.