after

after を使用すると、レスポンス（またはプリレンダリング）が完了した後に実行する作業をスケジュールできます。これは、ロギングや分析など、レスポンスをブロックすべきではないタスクや副作用に便利です。

サーバーコンポーネント（generateMetadata を含む）、サーバーアクション、ルートハンドラ、ミドルウェア で使用できます。

この関数は、レスポンス（またはプリレンダリング）が完了した後に実行されるコールバックを受け入れます：

import { after } from 'next/server'
// カスタムロギング関数
import { log } from '@/app/utils'

export default function Layout({ children }: { children: React.ReactNode }) {
  after(() => {
    // レイアウトがレンダリングされユーザーに送信された後に実行
    log()
  })
  return <>{children}</>
}

補足: after は動的 API ではなく、呼び出してもルートが動的になることはありません。静的ページ内で使用された場合、コールバックはビルド時またはページが再検証されるたびに実行されます。

リファレンス

パラメータ

• レスポンス（またはプリレンダリング）が完了した後に実行されるコールバック関数。

実行時間

after は、プラットフォームのデフォルトまたはルートの設定された最大実行時間まで実行されます。プラットフォームがサポートしている場合、maxDuration ルートセグメント設定を使用してタイムアウト制限を設定できます。

補足事項

• after は、レスポンスが正常に完了しなかった場合でも実行されます。エラーがスローされた場合や notFound または redirect が呼び出された場合も含まれます。
• after 内で呼び出される関数の重複を避けるために React の cache を使用できます。
• after は他の after 呼び出し内にネストできます。例えば、after 呼び出しをラップして追加機能を提供するユーティリティ関数を作成できます。

使用例

リクエスト API との併用

サーバーアクション や ルートハンドラ 内で after と共に cookies や headers などのリクエスト API を使用できます。これは、変更後のアクティビティをログに記録するのに便利です。例：

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

export async function POST(request: Request) {
  // 変更を実行
  // ...

  // 分析のためにユーザーアクティビティを記録
  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 のレンダリングライフサイクルの後に実行されるからです。

プラットフォームサポート

Next.js をセルフホスティングする際の after の設定方法 を参照してください。

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>()

// Next.js が使用するアクセサを定義して注入
const RequestContext: NextRequestContext = {
  get() {
    return RequestContextStorage.getStore()
  },
}
globalThis[Symbol.for('@next/request-context')] = RequestContext

const handler = (req, res) => {
  const contextValue = { waitUntil: YOUR_WAITUNTIL }
  // 値を提供
  return RequestContextStorage.run(contextValue, () => nextJsHandler(req, res))
}

バージョン履歴