Next.js - after() Function

The after() Function

The Next.js after() function is used to schedule a function to execute after pre rendering the page or after sending the response to the client. This function is helpful for performing cleanup tasks, logging, or any other post-processing operations.

Syntax

Following is the syntax of after() function:

import { after } from 'next/server'

export async function after(response: Response, 
                            request: NextRequest, 
                            event: NextFetchEvent) {
    // Modify the response if needed
    const newResponse = new Response(response.body, response)
    return newResponse;
}

Parameters

The after() function takes three parameters:

• response: The response object that will be sent to the client
• request: The NextRequest object representing the incoming request
• event: The NextFetchEvent object representing the fetch event

Return Value

The after() function will return a Response object. This can be the original response object or a new response object with modifications.

Key Points

• The after() function must be exported from middleware of Next.js application
• It is executed after the response is sent to the client
• You can use the after() function to perform cleanup tasks, logging, or modify the response

Example 1

In the code below, we demonstrate how to use the after() function to log errors and add a custom header to the response in a Next.js application.

// app/api/hello/route.ts

import { NextRequest, NextResponse, after } from 'next/server'

export async function GET(request: NextRequest) {
    return NextResponse.json({
        message: 'Hello, World!'
    })
}

export async function after(response: Response, request: NextRequest, event: NextFetchEvent) {
    if (response.status === 500) {
        console.error(`Error in request to ${request.nextUrl.pathname}`)
    }

    const newResponse = new Response(response.body, response)
    newResponse.headers.set('x-response-time', Date.now().toString())

    return newResponse;
}

Example 2

In the code below, we demonstrate how to use the after() function to log errors and modify the response in a Next.js application.

// app/api/hello/route.ts

import { NextRequest, NextResponse, after } from 'next/server'

export async function GET(request: NextRequest) {
    return NextResponse.json({
        message: 'Hello, World!'
    })
}

export async function after(response: Response, request: NextRequest, event: NextFetchEvent) {
    if (response.status === 500) {
        console.error(`Error in request to ${request.nextUrl.pathname}`)
    }

    const newResponse = new Response(response.body, response)
    newResponse.headers.set('x-response-time', Date.now().toString())

    return newResponse;
}