Implementierung von experimentellen Request Interceptors in Next.js

Die Einführung der Request Interceptors in Next.js bietet die Möglichkeit, Code im gleichen Prozess wie Seiten, Serveraktionen oder Routen-Handler auszuführen, bevor diese gerendert oder ausgeführt werden. Dies verbessert die Developer Experience (DX) und bietet umfassenden Zugriff auf Node.js-APIs.

Um Interceptors zu aktivieren, setze experimental.interceptors auf true in der next.config.ts Datei:

import type { NextConfig } from 'next';

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

export default nextConfig;

Ein Interceptor wird als asynchrone Funktion exportiert und kann mithilfe von redirect oder notFound den Steuerfluss beeinflussen. Beispiel:

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

  // Optionen zur Steuerflusskontrolle:
  redirect('/login');
  // oder
  notFound();
}

Um eine Authentifizierung auf einer Route wie /dashboard zu implementieren, erstellen Sie app/dashboard/interceptor.ts:

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);
  }
}

Zur Verbesserung der Leistung empfiehlt sich die Verwendung von Middleware in Verbindung mit Interceptors. Beispiel für middleware.ts:

import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

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

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*'] };

Interceptors bringen Einschränkungen mit sich, wie die Unfähigkeit, den Antwortstatus oder Header zu ändern. Für Änderungen an Cookies sollten Middleware oder Serveraktionen genutzt werden.