メインコンテンツまでスキップ

after

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

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

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

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

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

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

リファレンス​

パラメータ​

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

実行時間​

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

Good to know​

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

代替案​

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

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

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

例​

リクエストAPIと共に使用する場合​

Server ActionsやRoute Handlers内で、after内でcookiesやheadersなどのリクエストAPIを使用できます。これは、ミューテーション後のアクティビティをログに記録するのに役立ちます。例えば：

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) {
  // ミューテーションを実行
  // ...

  // 分析のためにユーザーのアクティビティをログに記録
  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' },
  })
}

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

バージョン履歴説明
v15.1.0afterが安定版になりました
v15.0.0-rcunstable_afterが導入されました