Next.js

How to get setup and deploy Jobs for your Next.js project

Trigger.dev lets you create long-running jobs in serverless environments. Support for long-running servers is coming soon.

Initial setup

View our Quick start guide to get setup. Or manual setup if you’d prefer.

Writing Jobs

View our guide for writing Jobs.

Deployment

View our deployment guide to learn how to deploy your Jobs.

Serverless function timeouts

If you are deploying your Next.js app to Vercel, you may need to configure a larger max function duration. By default, Vercel has a max function duration of 10 seconds. As outlined in our Limits docs, the max function duration effects the maximum Task duration.

So if you have any tasks that may take longer than 10 seconds to run (or close to 10 seconds), you should increase the max function duration to a higher value (only available to paid Vercel plans).

See the Vercel docs for more information on increasing the maxDuration for your Vercel Serverless Functions.

Middleware

Next.js Middleware allows you to run code before a request is completed, and if you are using it currently in your Next.js project (or you add it later), you might need to guard against altering requests to the /api/trigger endpoint, which needs to be exposed to the Trigger.dev installation (either your self-hosted one or the Trigger.dev Cloud).

To make sure you aren’t matching the /api/trigger route in your middleware, check your config.matcher export:

middleware.ts

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL("/home", request.url));
}

// See "Matching Paths" below to learn more
export const config = {
  matcher: "/about/:path*",
};

The above matcher doesn’t match /api/trigger so there won’t be an issue here. But the following middleware.ts file will cause conflicts with Trigger.dev

middleware.ts

export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL("/home", request.url));
}

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

As you can see, the last matcher "/(api|trpc)(.*)" matches anything starting with api, which matches /api/trigger. You can add a negative-lookahead pattern to the matcher to exclude the /api/trigger route:

middleware.ts

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api((?!/trigger))|trpc)(.*)"],
};

The above will match anything starting with /api except for /api/trigger.

If you want to match all routes except for /api/trigger, you can use the following matcher:

middleware.ts

// Match all routes other than /api/trigger
export const config = {
  matcher: ["/((?!api/trigger).*)"],
};

For more information about middleware matchers, head over to the Next.js middleware documentation.

Clerk.com Auth Middleware

If you are using Clerk.com for your Next.js authentication, make sure to update your middleware file to add /api/trigger to the publicRoutes, like so:

middleware.ts

import { authMiddleware } from "@clerk/nextjs";

// Adding the /api/trigger route to the public routes so clerk doesn't return a 401
// /api/trigger will handle it's own authentication
export default authMiddleware({
  publicRoutes: ["/api/trigger"],
});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

Known issues

• Module parse failed: Identifier 'NextResponse' has already been declared . This error is caused by version 13.4.4. For further information, please visit