Einführung in die Next.js-Middleware: Funktionsweise anhand von Beispielen

Lassen Sie uns über das Routing in Nextjs sprechen. Heute werden wir über die leistungsfähigste Middleware sprechen. Middleware in Nextjs bietet eine leistungsstarke und flexible Möglichkeit, sowohl Anfragen vom Server abzufangen als auch den Anfragefluss zu steuern (Weiterleitungen, URL-Umschreiben) und Funktionen wie Authentifizierung, Header und Cookie-Persistenz global zu verbessern.

Middleware erstellen

Lassen Sie uns die Middleware Next.js-Anwendung erstellen. Zunächst erstellen wir eine neue Datei für Middleware wie middleware.js oder middleware.ts im Ordner src. Die Middleware in Next.js muss Ihnen dann eine genaue Kontrolle darüber ermöglichen, wo sie aktiv sein wird (z. B. benutzerdefinierte Matcher-Konfiguration oder Verwendung von isXXX-Funktionen)

Umleiten

Am Beispiel der Umleitung stellen wir uns ein Szenario vor, in dem der Benutzer durch die Navigation zu /profile zur Startseite weitergeleitet werden soll. Mit dem benutzerdefinierten Matcher-Konfigurationsansatz können wir dies erreichen, indem wir die erforderlichen Typen importieren, eine Middleware-Funktion definieren und die Matcher-Konfiguration angeben:

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

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

In diesem Beispiel prüft die Middleware-Funktion, ob der Anforderungs-URL-Pfad /profile lautet und leitet den Benutzer zur Homepage weiter.

Für den bedingten Anweisungsansatz können wir den Code wie folgt ändern:

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

In diesem Fall überprüft die Middleware den Anforderungs-URL-Pfad und leitet den Benutzer zur /hello-Route um, wenn der Pfad /profile lautet.

Middleware in Next.js geht über die reine Verarbeitung von Weiterleitungen hinaus. Es ermöglicht auch das Umschreiben von URLs, was für die Unterstützung älterer URLs oder die SEO-Optimierung nützlich sein kann. Durch die Änderung von „redirect“ in „rewrite“ in den vorherigen Beispielen bleibt die URL im Browser dieselbe (/profile), aber der Antwortinhalt ändert sich in den Inhalt der Route „/hello“.

Verwendung von Cookies

Lassen Sie uns abschließend die Verwendung von Cookies und Headern in Middleware untersuchen. Wir können unsere Middleware ändern, um Benutzerpräferenzen für Themen zu verarbeiten und einen benutzerdefinierten Header für alle Antworten hinzuzufügen:

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

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

In diesem Beispiel prüfen wir zunächst, ob der Benutzer eine Designpräferenz in einem Cookie gespeichert hat. Wenn nicht, setzen wir das Theme durch Hinzufügen eines Cookies auf „dunkel“. Anschließend fügen wir der Antwort einen benutzerdefinierten Header hinzu, der für die Übergabe zusätzlicher Informationen oder für Debugging-Zwecke nützlich sein kann.

Wie Sie sehen können, ist die Middleware in Next.js ein leistungsstarkes Tool, mit dem Sie den Anfrage-Antwort-Zyklus effektiv steuern und abfangen können und Weiterleitungen, URL-Umschreibungen sowie die Manipulation von Headern und Cookies ermöglichen. Durch die Beherrschung der Middleware können Sie das Routing-Erlebnis in Ihren Next.js-Anwendungen verbessern und robustere und anpassbarere Benutzererlebnisse schaffen.

„Middleware in Next.js ist eine leistungsstarke Funktion, die eine robuste Möglichkeit bietet, den Fluss von Anfragen und Antworten innerhalb Ihrer Anwendungen abzufangen und zu steuern.“ - Next.js-Dokumentation

Abschluss

Zusammenfassend haben wir gelernt, wie man Middleware in Next.js definiert, die beiden Hauptansätze (benutzerdefinierte Matcher-Konfiguration und bedingte Anweisungen) untersucht und Middleware für die Verarbeitung von Umleitungen, URL-Umschreibungen und die Verwaltung von Cookies und Headern anwendet . Dieses Wissen wird Ihnen helfen, Ihre Next.js-Anwendungen auf die nächste Stufe zu heben, indem Sie die Flexibilität und Kontrolle nutzen, die Middleware bietet.

Das obige ist der detaillierte Inhalt vonEinführung in die Next.js-Middleware: Funktionsweise anhand von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!