"After" function blocking API route responses

[michaelabane]

Summary

Curious if anyone else is experiencing this issue. Our app uses the after function in a number of API routes, mostly for analytics calls but also for some heavier computations/functionality that we don't want blocking the response. We hadn't encountered any problems until this morning, when suddenly our after functions began to block the response, i.e., requests wouldn't register as complete until all logic in the after functions had finished running.

In local development, the after functions still work as expected. It's only in deployed versions that we're encountering this issue.

To make sure the problem wasn't something else in the codebase, I created a new NextJS project with the single API route shown below. Sure enough, it works as expected in local development but takes the full 10 seconds to respond when deployed on Vercel.

Any help greatly appreciated.

import { after } from "next/server";

export async function GET() {
  console.log("GET /api/test");
  after(async () => {
    // 10 second delay
    await new Promise((resolve) => setTimeout(resolve, 10000));
  });

  return new Response(JSON.stringify({ status: "success" }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

{
  "name": "testing-after",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "^15.3.0-canary.33",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
    "typescript": "^5"
  }
}

You can test this API route for yourself at the URL below

Additional information

No response

Example

https://nextjs-test-ten-hazel-95.vercel.app/

[5shine1]

Hey! This might be happening because Vercel’s serverless functions don’t keep running after the response is sent, so the after() function ends up blocking in production. You can try explicitly setting the runtime to 'nodejs' or use a background job/queue for heavier tasks. For quick fixes, you could also send non-blocking fetch() calls without await.

[icyJoseph]

Vercel does support this though, https://vercel.com/docs/functions/functions-api-reference/vercel-functions-package, I wonder if you can contact Vercel support, or open an issue here, https://github.com/vercel/vercel/issues?q=is%3Aissue%20state%3Aopen%20 I think

[michaelabane]

Thanks for the replies, @icyJoseph and @5shine1. When we awoke this morning, we found that the issue had righted itself: our after functions again worked as described in the NextJS documentation, without any updates on our end.

Presumably a transient issue with our deployment on Vercel.

[icyJoseph]

Yeah, since this world, partly by the support given by the underlying platform, I reckon Vercel deployed both an issue and a fix over the period of time, that you experienced the issue.

Glad to help any further. Otherwise, please mark as answered and closed. :)