Next.js Middleware bietet leistungsstarke Anpassungen für die Anforderungsverarbeitung innerhalb Ihrer Anwendung. Es erm?glicht das Abfangen von Anfragen zur Durchführung von Aktionen wie Sitzungsvalidierung, Protokollierung und Caching. Allerdings kann eine ineffiziente Middleware-Implementierung die Leistung erheblich beeintr?chtigen. In diesem Leitfaden werden die Funktionen und Best Practices der Middleware erl?utert, damit Sie besser verstehen, wann und wie Sie sie effektiv nutzen k?nnen.

Was ist Next.js Middleware?

Next.js Middleware umfasst Funktionen, die automatisch bei jeder eingehenden Anfrage ausgeführt werden. Diese Funktionen prüfen und ?ndern Anforderungsdaten, bevor sie das Routingsystem Ihrer Anwendung erreichen. Zu den Anwendungen geh?ren Authentifizierung, Protokollierung und Fehlermanagement. Middleware kann beispielsweise Benutzersitzungen validieren, indem sie Token überprüft und so unbefugten Zugriff verhindert.

Next.js Middleware ist ?u?erst flexibel und anpassbar. Sie k?nnen ma?geschneiderte Funktionen erstellen, um spezifische Anwendungsanforderungen zu erfüllen, indem Sie anwendungsweite Einstellungen oder Richtlinien festlegen. Dies vereinfacht die Routing-Konfiguration und vermeidet komplexe mehrschichtige Setups. Der Einsatz von Middleware führt zu robusteren, skalierbareren und wartbareren Anwendungen.

Next.js Middleware-Verarbeitungsreihenfolge

Es ist von entscheidender Bedeutung, die Reihenfolge der Vorg?nge beim Eingang einer Anfrage zu verstehen:

1. Header: next.config.jsHeader werden zuerst angewendet und legen die ersten Anforderungsheader fest. Dies ist ideal für Sicherheitsheader wie Content Security Policy (CSP) oder CORS.

2. Weiterleitungen: next.config.js Weiterleitungen werden als N?chstes verarbeitet und Anfragen verschiedenen URLs zugeordnet. Dies übernimmt das Umschreiben und Weiterleiten von URLs und verwaltet Routing-Regeln über Seiten oder die gesamte Anwendung hinweg.

3. Middleware-Bewertung: Nach Headern und Weiterleitungen wird die Middleware bewertet und ihre Logik ausgeführt.

4. beforeFiles: next.config.js beforeFiles (Umschreibungen) werden angewendet, was weiteres Umschreiben oder dateispezifische Logik vor dem Routing erm?glicht.

5. Dateisystemrouten: Die Dateisystemrouten der Anwendung werden verarbeitet (z. B. public/, _next/static/, Seiten und Apps). Hier werden statische Dateien bereitgestellt.

6. afterFiles: next.config.js afterFiles (Umschreibungen) werden angewendet und bieten einen letzten ?nderungspunkt vor dem dynamischen Routing.

7. Dynamische Routen: Dynamische Routen (z. B. /blog/[slug]) werden verarbeitet. Diese erfordern eine spezielle Handhabung und Umschreibung für Variablen oder Parameter.

8. Fallback: next.config.js Es wird ein Fallback angewendet, das Anfragen verwaltet, die sonst nicht weitergeleitet werden k?nnen. Dies erm?glicht Fehlerhandler oder Fallback-Routen.

H?ufige Next.js-Middleware-Anwendungsf?lle

• Authentifizierung: überprüfen Sie die Benutzeranmeldeinformationen, bevor Sie auf geschützte Ressourcen zugreifen. Middleware kann Sitzungstoken überprüfen und nicht authentifizierte Benutzer zur Anmeldung umleiten. Der Sachbearbeiter nutzt diesen Ansatz effektiv.

• Protokollierung: Verfolgen Sie Anwendungsereignisse (Benutzeraktionen, Fehler), indem Sie jede Anfrage zur Analyse und Fehlerbehebung auf einem zentralen Server protokollieren.

• Datenabruf: (Mit Einschr?nkungen) Laden Sie Daten aus APIs oder Datenbanken, um aktuelle Informationen zu erhalten. Beachten Sie die sp?ter besprochenen Leistungsaspekte.

• Anfragerouting: Passen Sie das Routing an, leiten Sie Anfragen auf bestimmte Pfade um oder implementieren Sie Catch-All-Fehlerhandler.

• Caching: Verbessern Sie die Leistung, indem Sie h?ufig aufgerufene Ressourcen im Speicher speichern und so Anfragen reduzieren. (Beispielcode im Originaltext bereitgestellt)

• Ratenbegrenzung: überwachen Sie Anfragen von Benutzern oder IP-Adressen und blockieren Sie überm??ige Anfragen, um Backend-Ressourcen zu schützen.

• Seitentransformationen: HTML neu schreiben oder Daten in Echtzeit umwandeln. Dies ist nützlich zum Umschreiben von Bild-URLs oder zum Bereitstellen von Assets aus verschiedenen Dom?nen.

• Analysen/Berichte: Verfolgen Sie das Benutzerverhalten und die Anwendungsleistung zur Optimierung. Middleware kann Cookies für die Analyseintegration von Drittanbietern ?ndern.

• Internationalisierung: Stellen Sie Inhalte in mehreren Sprachen basierend auf dem Gebietsschema des Benutzers bereit (z. B. unter Verwendung von IP-Adressen oder HTTP-Headern).

Middleware in einem Next.js-Projekt verwenden

Middleware wird durch Erstellen einer middleware.ts-Datei im Projektstamm implementiert. Diese Datei definiert eine Middleware-Funktion und (optional) einen Matcher.

Die Middleware-Funktion

Die Middleware-Funktion enth?lt die Middleware-Logik. Es nimmt ein request als Eingabe und gibt ein response zurück.

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

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}

Beispiel für die Weiterleitung von Anfragen an /dashboard, es sei denn, sie beginnen mit /api:

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

Die Funktion muss Folgendes zurückgeben: NextResponse.next(), NextResponse.redirect(), NextResponse.rewrite(), NextResponse.json() oder ein benutzerdefiniertes Response/NextResponse.

Der Matcher

Der Matcher bestimmt, welche Anfragen von der Middleware verarbeitet werden. Es ist im config-Objekt:

export const config = {
  matcher: '/hello', // Matches only /hello
}

Sie k?nnen Arrays für mehrere Routen oder regul?re Ausdrücke für komplexere übereinstimmungen verwenden:

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

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}

Ohne einen Matcher gilt die Middleware für alle Routen, was m?glicherweise Auswirkungen auf die Leistung hat.

Kombination mehrerer Middleware-Funktionen

Next.js unterstützt nur eine Middleware-Datei. Um mehrere Funktionen zu verwenden, erstellen Sie separate Funktionen, rufen Sie sie nacheinander auf und geben Sie eine Antwort zurück, wenn eine generiert wird:

export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}

Clerk und Next.js Middleware

Clerk vereinfacht die Authentifizierung durch Bereitstellung von clerkMiddleware:

export const config = {
  matcher: '/hello', // Matches only /hello
}

Dies übernimmt das Parsen von Cookies und die Benutzerüberprüfung. Sie k?nnen es mit benutzerdefinierter Logik erweitern:

export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}

Einschr?nkungen der Next.js-Middleware

• Edge Runtime-Einschr?nkungen: Middleware wird auf der Edge Runtime ausgeführt, wodurch die verfügbaren APIs und Bibliotheken eingeschr?nkt werden. Der Zugriff auf das Dateisystem ist nicht zul?ssig.

• Gr??enbeschr?nkung:Middleware-Funktionen sind auf 1 MB beschr?nkt.

• Nur ??ES-Module:Nur ??ES-Module werden unterstützt.

• Keine String-Auswertung: eval und new Function(evalString) sind nicht zul?ssig.

• überlegungen zur Leistung: Komplexe Middleware kann sich negativ auf die Leistung auswirken. Vom Datenbankzugriff innerhalb der Middleware wird generell abgeraten.

• Eingeschr?nkter Zugriff auf Anfrage/Antwort: Middleware hat keinen vollst?ndigen Zugriff auf Anfrage- und Antwortobjekte.

Fazit

Dieser Leitfaden bietet ein umfassendes Verst?ndnis der Next.js-Middleware, ihrer F?higkeiten, Einschr?nkungen und Best Practices. Denken Sie daran, effizienten Code zu priorisieren, um Leistungsengp?sse zu vermeiden.

Das obige ist der detaillierte Inhalt vonWas ist Middleware in Next.js?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!