Implementierung experimenteller Request Interceptors in Next.js

Diese Lösung beschreibt die Einführung experimenteller Request Interceptors in Next.js als Ergänzung zu Middleware. Interceptors ermöglichen die Ausführung von Code im Ursprung, d.h. im selben Prozess wie Seite, Serveraktion oder Router-Handler, bevor eine Seite gerendert oder eine Aktion ausgeführt wird.

Um Interceptors zu aktivieren, setzen Sie experimental.interceptors in Ihrer next.config.ts auf true:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  experimental: { interceptors: true },
};

export default nextConfig;

Interceptors werden in interceptor.ts-Dateien definiert, die innerhalb des app-Verzeichnisses platziert werden können und mit der Routing-Dateistruktur ausgerichtet sind.

Ein Interceptor exportiert standardmäßig eine asynchrone Funktion, die ein NextRequest-Objekt erhält:

export default async function intercept(request: NextRequest): Promise<void> {
  // Interceptor Logik...

  // Steuerungsflussoptionen:
  redirect('/login');
  // oder
  notFound();
  // oder
  notAuthorized(); // kommt bald!
  // oder
  throw new Error('Custom error message');
}

Beispiel für die Verwendung zur Authentifizierung:

import { auth } from '@/auth';
import { redirect } from 'next/navigation';

const signInPathname = '/dashboard/sign-in';

export default async function intercept(request: NextRequest): Promise<void> {
  const session = await auth();

  if (!session && request.nextUrl.pathname !== signInPathname) {
    redirect(signInPathname);
  }
}

Beachten Sie, dass Interceptors den Initialshell nicht am Servieren hindern können. Verwenden Sie Middleware, um frühe Überprüfungen wie eine leichte Sitzungsprüfung einzurichten:

export function middleware(request: NextRequest): NextResponse {
  if (
    !request.nextUrl.pathname.startsWith(signInPathname) &&
    !request.cookies.has('session')
  ) {
    return NextResponse.redirect(new URL(signInPathname, request.url));
  }

  return NextResponse.next();
}

export const config = { matcher: ['/dashboard/:path*'] };

Dies sichert, dass bei fehlender Sitzungscookie die Umleitung am Rand erfolgt, bevor ein Inhalt gerendert wird, was in Kombination mit der Vollauthentifizierung während des Renderings zu besseren Ladezeiten führt.