4 solutions to Next.js timeouts

Next.js is a great framework for TypeScript developers, removing the need to think about the front end and back end as two separate entities.

Many new Next.js users face limitations when deploying their applications on Serverless Platforms. Serverless Functions are meant to serve direct user interactions or API calls and, by design, should complete quickly.
Still, many developers want to leverage Next.js to build applications with integrations, AI workflows, or data imports, which may cause requests to last longer than the default 10-second maximum duration.

Hitting the limitations of Vercel Function durations does not mean that Next.js is unfit for your use case. Sometimes, you just need to take a different approach to writing such long-running code — to avoid timeouts and guarantee a reliable application architecture. This article will cover four approaches to solving your Next.js timeout issues.

Bump your Vercel Function max duration

This first solution applies if you need to keep your piece of long-running code user- or API-facing (in short, in a Vercel Function that returns data synchronously).

A quick win that most people miss is the ability to increase your Vercel Function's max duration from 10 seconds to 60 seconds by updating the vercel.json file:

{
  "functions": {
    "app/api/mySlowFunction/route.ts": {
      "maxDuration": 60
    }
  }
}

However, we recommend avoiding enabling a 60-second timeout for all your functions. Longer timeouts make it harder to pinpoint Vercel Functions that are not behaving correctly (and they consume your free tier allowance faster).
Still, if you'd like to enable a higher max duration for all your functions and projects, follow these steps:

1. From your dashboard, select your project and go to the Settings tab.
2. On the left side, select the Functions tab and scroll to the Function Max Duration section. Finally, update the Default Max Duration field value and select Save.

Opt-in for Vercel's new Fluid Compute

Vercel recently announced Fluid Compute, which brings server capabilities to serverless functions.

Under the hood, Fluid Compute pools your Vercel Function's compute resources with other Vercel Functions, allowing you to run longer-running code.

For example, without Fluid Compute, a Vercel Function performing a fetch() call lasting 10 seconds will account for 10 seconds of compute time, counting against the function's max duration and your account's usage limit.

With Fluid Compute, the same function will only account for 1 second of compute time, meaning that you can run it for 10 seconds without hitting the function's max duration.

Enable Fluid Compute

1. Open your project in your Vercel dashboard
2. Click on Settings and select the Functions section
3. Scroll to the Fluid Compute section and enable the toggle for Fluid Compute
4. Redeploy your project to apply changes.

Vercel Fluid Compute is a great solution for network-intensive functions (e.g., importing data from an external API) that enables you to run code for up to 1 minute on free plans and 14 minutes on paid plans.

Let's cover another solution that increases the max duration of your code to up to an hour, especially when combined with Fluid Compute: Durable Functions.

Move your code into a Durable Function

A piece of code that runs for a long time without returning a response synchronously is a good candidate for Durable Functions.
Durable Functions are the asynchronous counterpart to Vercel Functions, enabling you to run code asynchronously for extended periods while streaming updates of its progress.

You can transform your existing Vercel Function into a Durable Function by leveraging Inngest's similar developer experience.
First, you'll need to move your existing code into an Inngest Function:

inngest.createFunction({
    id: "long-running-code",
  },
  // A Function is triggered by events
  { event: "sync/start" },
  async ({ step }) => {
    // step is retried if it throws an error
    const data = await step.run("get-data", async () => {
      return getDataFromExternalSource();
    });

    // Steps can reuse data from previous ones
    await step.run("save-data", async () => {
      return db.syncs.insertMany(data);
    });
  }
);

Finally, replace your Next.js API Route with the following Inngest Function invocation:

import { inngest } from '@lib/inngest/client' 

export const dynamic = 'force-dynamic';
 
export function POST(request: Request) {
  await inngest.send({
    name: "sync/start",
    data: {
      //  The event's data (params)
    },
  });

  return new Response(`Sync triggered!`);
}

Under the hood, Durable Functions work in a similar way to Fluid Compute, where each step benefits from a full Serverless Function duration.

By combining Fluid Compute and Durable Functions, you can run your code for an extended period (up to multiple hours) while retaining the benefits of a Serverless Function.

Running code for an extended period is only the tip of the iceberg when it comes to the benefits of Inngest Functions.
Inngest Functions also bring:

• Realtime: to keep your users updated on the progress of their long-running request.
• Automatic retries: handy when interacting with external APIs.
• Throttling and Concurrency: to avoid hitting third-party rate limits.
• Sleeps: useful when implementing user onboarding workflows or email drip campaigns.

Do you still want to keep your long-running code in a Vercel Function? There is one solution left.

Still hitting the limits? Move to a Vercel Pro or Enterprise plan

All the solutions mentioned above that rely on the Vercel free tier will still count against the total 100 hours offered per month.
If your long-running piece of code must return a synchronous response and cannot be streamed, the only solution is to move to a Vercel paid plan.
The Vercel Pro plan increases your default max duration to 15 seconds, configurable up to 5 minutes:

Takeaways

We discussed four ways to solve Vercel function timeouts:

1. You can increase the max duration to 60 seconds.
2. For network-intensive functions, you can enable Vercel Fluid Compute to run your code for up to 1 minute on free plans.
3. You can use a Durable Function in combination with Vercel Fluid Compute to increase the max duration of your code for most use cases.
4. You can upgrade to the Pro or Enterprise tier on Vercel to get a 300-second or 900-second timeout, respectively.