Next Js Background Task by using the after function

Modern applications need to be fast. But real apps don’t just return a response — they also perform background operations like sending emails, updating analytics, logging user activity, or updating order tracking.

Traditionally these operations made APIs slow because the server waited for them before responding. The Next.js after() functionsolves this problem by allowing you to run code after the response is sent.

What is after() in Next.js?

after() is a server-side function introduced in Next.js 14.2+ that executes code after the HTTP response has already been delivered to the user.

That means the user does not wait for heavy operations like sending emails. The page loads instantly while background tasks continue on the server.

Problem Before after()

Normally when you write an API route, every operation blocks the response.

export async function POST(req) {

  const order = await createOrder();

  await sendEmail(order);       // slow
  await updateAnalytics(order); // slow
  await writeLogs(order);       // slow

  return Response.json({ success: true });
}

Here the user waits for email, analytics, and logging before getting a response. This leads to slow checkout experience and poor UX.

Using after() Function

import { after } from "next/server";

export async function POST(req) {

  const order = await createOrder();

  after(async () => {
    await sendEmail(order);
    await updateAnalytics(order);
    await writeLogs(order);
  });

  return Response.json({ success: true });
}

Now the response returns instantly and the background work continues on the server. This dramatically improves performance.

Real World Example (Order Confirmation)

A typical e-commerce order should immediately show “Order placed successfully” while emails and tracking happen in the background.

import { after } from "next/server";

export async function POST(req) {

  const body = await req.json();
  const orderId = await DB.table("orders").insert(body);

  after(async () => {
    await EmailService.sendOrderDetails(body.email, orderId);
    await EmailService.sendOrderDetails(process.env.ADMIN_EMAIL, orderId);
  });

  return Response.json({
    success: true,
    orderId
  });
}

Users now get instant feedback, while the system still completes all required tasks.

Common Use Cases

• Send welcome email
• Order confirmation email
• Analytics tracking
• Activity logging
• Webhook notifications
• Cache revalidation

after(async () => {
  await revalidatePath("/blog");
});

Important Rules

• after() works only on the server
• It cannot be used inside client components
• Do not return Response inside after()
• Always handle errors using try/catch

after(async () => {
  try {
    await sendEmail();
  } catch (err) {
    console.error(err);
  }
});

Conclusion

The Next.js after() function allows you to run background jobs without queues or cron workers. It improves user experience by returning a response instantly while still performing heavy operations.

You should use after() for emails, analytics, logs, and post-processing tasks. It is one of the most important performance features introduced in modern Next.js.