after

after ermöglicht es Ihnen, Arbeiten zu planen, die nach Abschluss einer Antwort (oder Vorberenderung) ausgeführt werden sollen. Dies ist nützlich für Aufgaben und andere Nebeneffekte, die die Antwort nicht blockieren sollten, wie z.B. Protokollierung und Analysen.

Die Funktion kann in Server-Komponenten (einschließlich generateMetadata), Server-Aktionen, Route-Handlern und Middleware verwendet werden.

Die Funktion akzeptiert einen Callback, der nach Abschluss der Antwort (oder Vorberenderung) ausgeführt wird:

import { after } from 'next/server'
// Benutzerdefinierte Protokollierungsfunktion
import { log } from '@/app/utils'

export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // Wird ausgeführt, nachdem das Layout gerendert und an den Benutzer gesendet wurde
    log()
  })
  return <>{children}</>
}

Wissenswert: after ist keine dynamische API und ihr Aufruf führt nicht dazu, dass eine Route dynamisch wird. Wenn sie innerhalb einer statischen Seite verwendet wird, wird der Callback zum Build-Zeitpunkt oder bei einer Revalidierung der Seite ausgeführt.

Referenz

Parameter

• Eine Callback-Funktion, die nach Abschluss der Antwort (oder Vorberenderung) ausgeführt wird.

Dauer

after läuft für die standardmäßige oder konfigurierte maximale Dauer Ihrer Route auf der Plattform. Wenn Ihre Plattform dies unterstützt, können Sie das Timeout-Limit mit der maxDuration-Route-Segment-Konfiguration festlegen.

Wissenswert

• after wird auch dann ausgeführt, wenn die Antwort nicht erfolgreich abgeschlossen wurde. Einschließlich Fällen, in denen ein Fehler auftritt oder notFound bzw. redirect aufgerufen wird.
• Sie können React cache verwenden, um Funktionen, die innerhalb von after aufgerufen werden, zu deduplizieren.
• after kann innerhalb anderer after-Aufrufe verschachtelt werden, z.B. können Sie Utility-Funktionen erstellen, die after-Aufrufe umschließen, um zusätzliche Funktionalität hinzuzufügen.

Beispiele

Mit Request-APIs

Sie können Request-APIs wie cookies und headers innerhalb von after in Server-Aktionen und Route-Handlern verwenden. Dies ist nützlich für die Protokollierung von Aktivitäten nach einer Mutation. Beispiel:

import { after } from 'next/server'
import { cookies, headers } from 'next/headers'
import { logUserAction } from '@/app/utils'

export async function POST(request: Request) {
  // Mutation durchführen
  // ...

  // Benutzeraktivität für Analysen protokollieren
  after(async () => {
    const userAgent = (await headers().get('user-agent')) || 'unknown'
    const sessionCookie =
      (await cookies().get('session-id'))?.value || 'anonymous'

    logUserAction({ sessionCookie, userAgent })
  })

  return new Response(JSON.stringify({ status: 'success' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' },
  })
}

Allerdings können Sie diese Request-APIs nicht innerhalb von after in Server-Komponenten verwenden. Dies liegt daran, dass Next.js wissen muss, welcher Teil des Baums auf die Request-APIs zugreift, um Partielle Vorberenderung zu unterstützen, aber after läuft nach dem Rendering-Lebenszyklus von React.

Plattformunterstützung

Erfahren Sie, wie Sie after konfigurieren, wenn Sie Next.js selbst hosten.

const RequestContext = globalThis[Symbol.for('@next/request-context')]
const contextValue = RequestContext?.get()
const waitUntil = contextValue?.waitUntil

type NextRequestContext = {
  get(): NextRequestContextValue | undefined
}

type NextRequestContextValue = {
  waitUntil?: (promise: Promise<any>) => void
}

import { AsyncLocalStorage } from 'node:async_hooks'

const RequestContextStorage = new AsyncLocalStorage<NextRequestContextValue>()

// Definieren und injizieren Sie den Accessor, den Next.js verwenden wird
const RequestContext: NextRequestContext = {
  get() {
    return RequestContextStorage.getStore()
  },
}
globalThis[Symbol.for('@next/request-context')] = RequestContext

const handler = (req, res) => {
  const contextValue = { waitUntil: YOUR_WAITUNTIL }
  // Den Wert bereitstellen
  return RequestContextStorage.run(contextValue, () => nextJsHandler(req, res))
}

Versionsverlauf