Next.js setup guide

This guide will show you how to setup Trigger.dev in your existing Next.js project, test an example task, and view the run.

This guide can be followed for both App and Pages router as well as Server Actions.

Initial setup

Set your secret key locally

Set your TRIGGER_SECRET_KEY environment variable in your .env.local file if using the Next.js App router or .env file if using Pages router. This key is used to authenticate with Trigger.dev, so you can trigger runs from your Next.js app. Visit the API Keys page in the dashboard and select the DEV secret key.

For more information on authenticating with Trigger.dev, see the API keys page.

Triggering your task in Next.js

Here are the steps to trigger your task in the Next.js App and Pages router and Server Actions. Alternatively, check out this repo for a full working example of a Next.js app with a Trigger.dev task triggered using a Server Action.

App Router

1. Create a Route Handler

   Add a Route Handler by creating a route.ts file (or route.js file) in the app/api directory like this: app/api/hello-world/route.ts.

2. Add your task

   Add this code to your route.ts file which imports your task along with NextResponse to handle the API route response:

   app/api/hello-world/route.ts

   // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
   import type { helloWorldTask } from "@/trigger/example";
   import { tasks } from "@trigger.dev/sdk/v3";
   import { NextResponse } from "next/server";
   
   //tasks.trigger also works with the edge runtime
   //export const runtime = "edge";
   
   export async function GET() {
     const handle = await tasks.trigger<typeof helloWorldTask>(
       "hello-world",
       "James"
     );
   
     return NextResponse.json(handle);
   }
   

3. Trigger your task

Troubleshooting & extra resources

Revalidation from your Trigger.dev tasks

Revalidation allows you to purge the cache for an ISR route. To revalidate an ISR route from a Trigger.dev task, you have to set up a handler for the revalidate event. This is an API route that you can add to your Next.js app.

This handler will run the revalidatePath function from Next.js, which purges the cache for the given path.

The handlers are slightly different for the App and Pages router:

Revalidation handler: App Router

If you are using the App router, create a new revalidation route at app/api/revalidate/path/route.ts:

app/api/revalidate/path/route.ts

import { NextRequest, NextResponse } from "next/server";
import { revalidatePath } from "next/cache";

export async function POST(request: NextRequest) {
  try {
    const { path, type, secret } = await request.json();
    // Create a REVALIDATION_SECRET and set it in your environment variables
    if (secret !== process.env.REVALIDATION_SECRET) {
      return NextResponse.json({ message: "Invalid secret" }, { status: 401 });
    }

    if (!path) {
      return NextResponse.json({ message: "Path is required" }, { status: 400 });
    }

    revalidatePath(path, type);

    return NextResponse.json({ revalidated: true });
  } catch (err) {
    console.error("Error revalidating path:", err);
    return NextResponse.json({ message: "Error revalidating path" }, { status: 500 });
  }
}

Revalidation handler: Pages Router

If you are using the Pages router, create a new revalidation route at pages/api/revalidate/path.ts:

pages/api/revalidate/path.ts

import type { NextApiRequest, NextApiResponse } from "next";

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
    if (req.method !== "POST") {
      return res.status(405).json({ message: "Method not allowed" });
    }

    const { path, secret } = req.body;

    if (secret !== process.env.REVALIDATION_SECRET) {
      return res.status(401).json({ message: "Invalid secret" });
    }

    if (!path) {
      return res.status(400).json({ message: "Path is required" });
    }

    await res.revalidate(path);

    return res.json({ revalidated: true });
  } catch (err) {
    console.error("Error revalidating path:", err);
    return res.status(500).json({ message: "Error revalidating path" });
  }
}

Revalidation task

This task takes a path as a payload and will revalidate the path you specify, using the handler you set up previously.

To run this task locally you will need to set the REVALIDATION_SECRET environment variable in your .env.local file (or .env file if using Pages router).

To run this task in production, you will need to set the REVALIDATION_SECRET environment variable in Vercel, in your project settings, and also in your environment variables in the Trigger.dev dashboard.

trigger/revalidate-path.ts

import { logger, task } from "@trigger.dev/sdk/v3";

const NEXTJS_APP_URL = process.env.NEXTJS_APP_URL; // e.g. "http://localhost:3000" or "https://my-nextjs-app.vercel.app"
const REVALIDATION_SECRET = process.env.REVALIDATION_SECRET; // Create a REVALIDATION_SECRET and set it in your environment variables

export const revalidatePath = task({
  id: "revalidate-path",
  run: async (payload: { path: string }) => {
    const { path } = payload;

    try {
      const response = await fetch(`${NEXTJS_APP_URL}/api/revalidate/path`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          path: `${NEXTJS_APP_URL}/${path}`,
          secret: REVALIDATION_SECRET,
        }),
      });

      if (response.ok) {
        logger.log("Path revalidation successful", { path });
        return { success: true };
      } else {
        logger.error("Path revalidation failed", {
          path,
          statusCode: response.status,
          statusText: response.statusText,
        });
        return {
          success: false,
          error: `Revalidation failed with status ${response.status}: ${response.statusText}`,
        };
      }
    } catch (error) {
      logger.error("Path revalidation encountered an error", {
        path,
        error: error instanceof Error ? error.message : String(error),
      });
      return {
        success: false,
        error: `Failed to revalidate path due to an unexpected error`,
      };
    }
  },
});

Testing the revalidation task

You can test your revalidation task in the Trigger.dev dashboard on the testing page, using the following payload.

{
  "path": "<path-to-revalidate>" // e.g. "blog"
}

Additional resources for Next.js

Next.js - triggering tasks using webhooks

How to create a webhook handler in a Next.js app, and trigger a task from it.