Was ist Middleware in Next.js?

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.

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

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

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

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:

definiert

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

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

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

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

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:

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

Clerk und Next.js Middleware

Clerk vereinfacht die Authentifizierung durch Bereitstellung von clerkMiddleware:

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

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

<code class="language-javascript">export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}</code>

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!