---
title: "Next.js"
description: "How to get setup and deploy Jobs for your Next.js project"
---

<Snippet file="long-running-coming-soon.mdx" />

## Initial setup

View our [Quick start guide](/documentation/quickstarts/nextjs) to get setup. Or [manual setup](/documentation/guides/manual/nextjs) if you'd prefer.

## Writing Jobs

View our [guide for writing Jobs](/documentation/guides/create-a-job).

## Deployment

View our [deployment guide](/documentation/guides/deployment) 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](/documentation/concepts/limits#maximum-task-duration), the max function duration effects the maximum [Task](/documentation/concepts/tasks) 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](https://vercel.com/docs/functions/serverless-functions/runtimes#max-duration) 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:

```ts 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

```ts 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:

```ts 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:

```ts 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](https://nextjs.org/docs/pages/building-your-application/routing/middleware#matcher).

### Clerk.com Auth Middleware

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

```ts 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](https://github.com/nextauthjs/next-auth/issues/7660)
