Matt Aitken
95 lines
3.3 KiB
Plaintext
95 lines
3.3 KiB
Plaintext
---
|
|
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.
|
|
|
|
## 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)
|