after

after は、レスポンス (または事前レンダリング) が完了した後に実行されるタスクをスケジュールできます。これは、ログ記録や分析など、レスポンスをブロックすべきではないタスクやその他の副作用に役立ちます。

これは、Server Components (generateMetadataを含む)、Server Actions、Route Handlers、およびMiddleware で使用できます。

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

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()を使用することや、Promise から await を削除することに似ていますが、以下の違いがあります。

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

after は他の Next.js API やコンテキストを考慮して設計されているため、使用することをお勧めします。

例

リクエストAPIの使用例

Server Actions および Route Handlers の 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) {
  // 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' },
  })
}

ただし、これらのリクエスト API は、Server Components の after 内では使用できません。これは、Next.js が部分的な事前レンダリングをサポートするために、ツリーのどの部分がリクエスト API にアクセスしているかを知る必要があるためですが、after は React のレンダリングライフサイクルの後に実行されます。