What is after() in Next.js and when should you use it?

Q: What is after() in Next.js and when should you use it?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against real output from a build or a running server. ## 1. Why This Even Matters — A Story First At a good café the barista hands you your coffee first and only then writes the sale in the notebook, wipes the counter and restocks the cups. If they did all that bookkeeping before handing over the cup, every customer would wait longer for work that has nothing to do with them. Many server requests have the same shape: the important part (save the order, render the page) and the bookkeeping (write an audit line, send an analytics event, warm a cache). `after()` lets a Next.js server hand over the response

The problem

Question presented to candidate: "After a user submits an order we write an audit log and send an analytics event, and both slow the response down. What does after() in Next.js do, and is it the right tool here?"

What a strong answer should cover:

after(callback) from next/server schedules work to run after the response (or prerender) has finished, so logging and analytics do not delay the user.
Where it works: Server Components (including generateMetadata), Server Actions, Route Handlers and Proxy; it is not a request-time API and does not make a route dynamic.
Request data: in Route Handlers and Server Actions you can call cookies()/headers() inside the callback; in Server Components you must read them before and close over the values.
It runs even when the response fails, calls notFound() or redirect(); in a static page it runs at build time or on revalidation.
Limits: the callback lives within the route's max duration; on serverless it relies on a waitUntil primitive; it is not a durable job queue, so critical work needs a real queue.

Clarifying questions expected:

"Must the audit log never be lost?" — if yes, write it in the request or enqueue it durably; after is best effort.
"Where is this deployed?" — a Node server, Vercel and adapters support it differently; static export does not.

Code / implementation expected: Yes — a Route Handler or Server Action that returns immediately and logs inside after().

nextjs
after
server
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against real output from a build or a running server.

1. Why This Even Matters — A Story First

At a good café the barista hands you your coffee first and only then writes the sale in the notebook, wipes the counter and restocks the cups. If they did all that bookkeeping before handing over the cup, every customer would wait longer for work that has nothing to do with them.

Many server requests have the same shape: the important part (save the order, render the page) and the bookkeeping (write an audit

The solution is hidden so you can try first

8 min read · 8 sections

Read the code

Route Handler: respond now, log afterwards

// app/after/api/route.ts
import { after } from "next/server";
import { headers } from "next/headers";
import { log, sleep } from "@/lib/log";

export async function POST() {
  log("route", "mutation done, scheduling after()");
  after(async () => {
    const ua = (await headers()).get("user-agent"); // allowed inside after() in a Route Handler
    log("route", `after() started, user-agent=${ua}`);
    await sleep(1500); // pretend this is a slow analytics call
    log("route", "after() finished");
  });
  log("route", "returning response");
  return Response.json({ ok: true });
}

Server Component: read request data before after()

// app/after/dynamic/page.tsx
import { after } from "next/server";
import { cookies } from "next/headers";
import { log, sleep } from "@/lib/log";

export default async function Page() {
  const visitor = (await cookies()).get("visitor")?.value ?? "anonymous"; // read BEFORE after()
  after(async () => {
    await sleep(1000);
    log("page", `after() logged a view for ${visitor}`);
  });
  log("page", "render finished");
  return <h1>Hello {visitor}</h1>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.