Skip to content

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 也会执行。包括抛出错误或调用 notFoundredirect 时。
  • 您可以使用 React cache 来去重在 after 内部调用的函数。
  • after 可以嵌套在其他 after 调用中,例如,您可以创建包装 after 调用的实用程序函数以添加其他功能。

替代方案

after 的用例是在不阻止主响应的情况下处理辅助任务。它类似于使用平台的 waitUntil() 或从 Promise 中删除 await,但有以下区别:

  • waitUntil():接受一个 Promise 并将一个任务排队,以便在请求的生命周期内执行,而 after 接受一个回调,该回调将在响应完成后执行。
  • 删除 await:在响应期间开始执行,这会占用资源。在无服务器环境中也不可靠,因为函数在发送响应后立即停止计算,可能会中断任务。

我们建议使用 after,因为它在设计时考虑了其他 Next.js API 和上下文。

示例

使用请求 API

您可以在 服务器操作路由处理程序after 中使用请求 API,例如 cookiesheaders。这对于在突变后记录活动非常有用。例如

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.0after 变为稳定版。
v15.0.0-rc引入了 unstable_after