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が呼び出された場合も含みます。
• React の cache を使用して、after 内で呼び出される関数の重複を排除できます。
• after を他の after 呼び出しの中にネストすることができます。例えば、追加機能を加えるために after 呼び出しをラップするユーティリティ関数を作成できます。

代替手段

after のユースケースは、主要なレスポンスをブロックすることなく二次的なタスクを処理することです。これはプラットフォームのwaitUntil()を使用したり、プロミスからawaitを削除したりする方法に似ていますが、以下の違いがあります：

• waitUntil()：プロミスを受け取り、リクエストのライフサイクル中に実行されるタスクをキューに入れますが、afterはレスポンスの完了後に実行されるコールバックを受け取ります。
• awaitの削除：レスポンス中に実行を開始するため、リソースを使用します。また、サーバーレス環境では、レスポンス送信後に関数の計算が即座に停止する可能性があるため、タスクが中断されることがあり信頼性が低くなります。

他のNext.js APIやコンテキストを考慮して設計された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のレンダリングライフサイクルの後に実行されるためです。