Next.js setup guide

​

Prerequisites

• Setup a project in
• Ensure TypeScript is installed
• Create a Trigger.dev account
• Create a new Trigger.dev project

​

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
• App Router (Server Actions)
• Pages Router

// 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);
}

http://localhost:3000/api/hello-world

​

Automatically sync environment variables from your Vercel project (optional)

If you want to automatically sync environment variables from your Vercel project to Trigger.dev, you can add our syncVercelEnvVars build extension to your trigger.config.ts file.

import { defineConfig } from "@trigger.dev/sdk/v3";
import { syncVercelEnvVars } from "@trigger.dev/build/extensions/core";

export default defineConfig({
  project: "<project ref>",
  // Your other config settings...
  build: {
    extensions: [syncVercelEnvVars()],
  },
});

​

Manually add your environment variables (optional)

If you have any environment variables in your tasks, be sure to add them in the dashboard so deployed code runs successfully. In Node.js, these environment variables are accessed in your code using process.env.MY_ENV_VAR.

In the sidebar select the “Environment Variables” page, then press the “New environment variable” button.

You can add values for your local dev environment, staging and prod.

You can also add environment variables in code by following the steps on the Environment Variables page.

​

Deploying your task to Trigger.dev

For this guide, we’ll manually deploy your task by running the CLI deploy command below. Other ways to deploy are listed in the next section.

​

Other ways to deploy

• GitHub Actions
• Vercel Integration

​

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:

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:

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.

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"
}

​

Next.js build failing due to missing API key in GitHub CI

This issue occurs during the Next.js app build process on GitHub CI where the Trigger.dev SDK is expecting the TRIGGER_SECRET_KEY environment variable to be set at build time. Next.js attempts to compile routes and creates static pages, which can cause issues with SDKs that require runtime environment variables. The solution is to mark the relevant pages as dynamic to prevent Next.js from trying to make them static. You can do this by adding the following line to the route file:

export const dynamic = "force-dynamic";

​

Correctly passing event handlers to React components

An issue can sometimes arise when you try to pass a function directly to the onClick prop. This is because the function may require specific arguments or context that are not available when the event occurs. By wrapping the function call in an arrow function, you ensure that the handler is called with the correct context and any necessary arguments. For example:

This works:

<Button onClick={() => myTask()}>Trigger my task</Button>

Whereas this does not work:

<Button onClick={myTask}>Trigger my task</Button>

​

Learn more about Next.js and Trigger.dev

​

Walk-through guides from development to deployment

​

Task examples

Fal.ai with Realtime in Next.js

Generate an image from a prompt using Fal.ai and Trigger.dev Realtime.

Generate a cartoon using Fal.ai in Next.js

Convert an image to a cartoon using Fal.ai.

Vercel sync environment variables

Learn how to automatically sync environment variables from your Vercel projects to Trigger.dev.

Vercel AI SDK

Learn how to use the Vercel AI SDK, which is a simple way to use AI models from different providers, including OpenAI, Anthropic, Amazon Bedrock, Groq, Perplexity etc.

​

Useful next steps