跳到主要内容

after

after 允许你安排在响应（或预渲染）完成后执行的工作。这对于不应阻止响应的任务和其他副作用很有用，例如日志记录和分析。

¥after allows you to schedule work to be executed after a response (or prerender) is finished. This is useful for tasks and other side effects that should not block the response, such as logging and analytics.

它可以用于 服务器组件（包括 generateMetadata）、服务器操作、路由处理程序 和 中间件。

¥It can be used in Server Components (including generateMetadata), Server Actions, Route Handlers, and Middleware.

该函数接受在响应（或预渲染）完成后执行的回调：

¥The function accepts a callback that will be executed after the response (or prerender) is finished:

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}</>
}
import { after } from 'next/server'
// Custom logging function
import { log } from '@/app/utils'

export default function Layout({ children }) {
  after(() => {
    // Execute after the layout is rendered and sent to the user
    log()
  })
  return <>{children}</>
}

很高兴知道：after 不是 动态 API，调用它不会导致路由变为动态。如果它在静态页面中使用，则回调将在构建时执行，或者在重新验证页面时执行。

¥Good to know: after is not a Dynamic API and calling it does not cause a route to become dynamic. If it's used within a static page, the callback will execute at build time, or whenever a page is revalidated.

参考​

¥Reference

参数​

¥Parameters

  • 响应（或预渲染）完成后将执行的回调函数。

    ¥A callback function which will be executed after the response (or prerender) is finished.

期间​

¥Duration

after 将运行平台默认或配置的路由最大持续时间。如果你的平台支持，你可以使用 maxDuration 路由段配置来配置超时限制。

¥after will run for the platform's default or configured max duration of your route. If your platform supports it, you can configure the timeout limit using the maxDuration route segment config.

很高兴知道​

¥Good to know

  • 即使响应未成功完成，after 也会执行。包括抛出错误或调用 notFound 或 redirect 时。

    ¥after will be executed even if the response didn't complete successfully. Including when an error is thrown or when notFound or redirect is called.

  • 你可以使用 React cache 对 after 内部调用的函数进行数据去重。

    ¥You can use React cache to deduplicate functions called inside after.

  • after 可以嵌套在其他 after 调用中，例如，你可以创建封装 after 调用的实用程序函数来添加其他功能。

    ¥after can be nested inside other after calls, for example, you can create utility functions that wrap after calls to add additional functionality.

替代方案​

¥Alternatives

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

¥The use case for after is to process secondary tasks without blocking the primary response. It's similar to using the platform's waitUntil() or removing await from a promise, but with the following differences:

  • waitUntil()：接受 promise 并将要在请求的生命周期内执行的任务排入队列，而 after 接受将在响应完成后执行的回调。

    ¥**waitUntil()**: accepts a promise and enqueues a task to be executed during the lifecycle of the request, whereas after accepts a callback that will be executed after the response is finished.

  • 删除 await：在响应期间开始执行，这会使用资源。它在无服务器环境中也不可靠，因为函数在发送响应后立即停止计算，可能会中断任务。

    ¥Removing await: starts executing during the response, which uses resources. It's also not reliable in serverless environments as the function stops computation immediately after the response is sent, potentially interrupting the task.

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

¥We recommend using after as it has been designed to consider other Next.js APIs and contexts.

示例​

¥Examples

使用请求 API​

¥With request APIs

你可以在 服务器操作 和 路由处理程序 中的 after 中使用请求 API（如 cookies 和 headers）。这对于在突变后记录活动很有用。例如：

¥You can use request APIs such as cookies and headers inside after in Server Actions and Route Handlers. This is useful for logging activity after a mutation. For example:

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' },
  })
}
import { after } from 'next/server'
import { cookies, headers } from 'next/headers'
import { logUserAction } from '@/app/utils'

export async function POST(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 的渲染生命周期之后运行。

¥However, you cannot use these request APIs inside after in Server Components. This is because Next.js needs to know which part of the tree access the request APIs to support Partial Prerendering, but after runs after React's rendering lifecycle.

版本历史描述
v15.1.0after 变得稳定。
v15.0.0-rcunstable_after 推出。