after

after 允許您排程在回應（或預先渲染）完成後執行的工作。這對於不應阻礙回應的任務和其他副作用非常有用，例如記錄和分析。

它可以用於伺服器元件（包括generateMetadata）、伺服器行為、路由處理器和中介層。

此函式接受一個回呼，該回呼將在回應（或預先渲染）完成後執行

app/layout.tsx

import { after } from 'next/server'
// Custom logging function
import { log } from '@/app/utils'
 
export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // Execute after the layout is rendered and sent to the user
    log()
  })
  return <>{children}</>
}

小知識： after 不是動態 API，呼叫它不會導致路由變成動態。如果在靜態頁面中使用，則回呼將在建置時或頁面重新驗證時執行。

參考

參數

一個回呼函式，將在回應（或預先渲染）完成後執行。

持續時間

after 將在平台的預設或設定的最大路由持續時間內執行。如果您的平台支援，您可以使用maxDuration 路由區段設定來設定逾時限制。

小知識

即使回應未成功完成，after 也會執行。包括在拋出錯誤或呼叫 notFound 或 redirect 時。
您可以使用 React cache 來重複資料刪除在 after 內部呼叫的函式。
after 可以巢狀於其他 after 呼叫中，例如，您可以建立實用函式來包裝 after 呼叫以新增其他功能。

替代方案

after 的使用案例是在不阻礙主要回應的情況下處理次要任務。它類似於使用平台的waitUntil() 或從承諾中移除 await，但有以下差異

waitUntil()：接受一個承諾並將任務排入佇列，以便在請求的生命週期內執行，而 after 接受一個將在回應完成後執行的回呼。
移除 await：在回應期間開始執行，這會使用資源。在無伺服器環境中也不可靠，因為函式會在傳送回應後立即停止計算，可能會中斷任務。

我們建議使用 after，因為它的設計已考量其他 Next.js API 和情境。

範例

使用請求 API

您可以在伺服器行為和路由處理器中的 after 內部使用請求 API，例如cookies 和 headers。這對於在變動後記錄活動非常有用。例如

app/api/route.ts

import { after } from 'next/server'
import { cookies, headers } from 'next/headers'
import { logUserAction } from '@/app/utils'
 
export async function POST(request: Request) {
  // Perform mutation
  // ...
 
  // Log user activity for analytics
  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' },
  })
}

但是，您不能在伺服器元件中的 after 內部使用這些請求 API。這是因為 Next.js 需要知道樹狀結構的哪個部分存取請求 API，以支援部分預先渲染，但 after 在 React 的渲染生命週期之後執行。

版本歷史	描述
`v15.1.0`	`after` 變得穩定。
`v15.0.0-rc`	引入 `unstable_after`。