Optimierung der Next.js Request Interception für verbesserte Ausführung

Die Einführung von Request Interceptors löst viele der Einschränkungen, die bei der Nutzung von Middleware in Next.js auftreten. In der aktuellen Implementierung befassen sich Interceptors mit der Ausführung von Code in derselben Umgebung wie die spezifischen Anfragen an Seiten, Routen-Handler oder Server-Aktionen.

Um diese experimentelle Funktion zu nutzen und ihr Potenzial auszuschöpfen, folgen Sie diesen Schritten:

import type { NextConfig } from 'next';

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

export default nextConfig;

Legen Sie eine Datei interceptor.ts an, die sich in der Verzeichnisstruktur Ihrer Anwendung befindet, und definieren Sie darin eine Standardfunktion, die den NextRequest verarbeitet:

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

Für ein effizientes Routing können Sie Middleware verwenden, um nicht authentifizierte Benutzer frühzeitig umzuleiten und damit die Ladezeiten zu optimieren:

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

Diese Kombination bietet einen flexiblen und effektiven Ansatz zur Optimierung der Authentifizierung sowie der Performanz in Ihrer Next.js-Anwendung, indem sie die Stärken von Middleware und Interceptors effektiv kombiniert.