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.
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
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
Copy
Ask AI
// Next.js API route support: https://nextjs.org/docs/api-routes/introductionimport 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
1
Create an `actions.ts` file
Create an actions.ts file in the app/api directory and add this code which imports your helloWorldTask() task. Make sure to include "use server"; at the top of the file.
app/api/actions.ts
Copy
Ask AI
"use server"; import type { helloWorldTask } from "@/trigger/example"; import { tasks } from "@trigger.dev/sdk/v3"; export async function myTask() { try { const handle = await tasks.trigger<typeof helloWorldTask>( "hello-world", "James" ); return { handle }; } catch (error) { console.error(error); return { error: "something went wrong", }; } }
2
Create a button to trigger your task
For the purposes of this guide, we’ll create a button with an onClick event that triggers your task. We’ll add this to the page.tsx file so we can trigger the task by clicking the button. Make sure to import your task and include "use client"; at the top of your file.
Open your app in a browser, making sure the port number is the same as the one you’re running your Next.js app on. For example, if you’re running your Next.js app on port 3000, visit:
Copy
Ask AI
http://localhost:3000
Run the dev server from Step 2. of the Initial Setup section above if it’s not already running:
Copy
Ask AI
npx trigger.dev@latest dev
Then click the button we created in your app to trigger the task. You should see the CLI log the task run with a link to view the logs.Visit the Trigger.dev dashboard to see your run.
1
Create an API route
Create an API route in the pages/api directory. Then create a hello-world .ts (or hello-world.js) file for your task and copy this code example:
pages/api/hello-world.ts
Copy
Ask AI
// Next.js API route support: https://nextjs.org/docs/api-routes/introductionimport { helloWorldTask } from "@/trigger/example";import { tasks } from "@trigger.dev/sdk/v3";import type { NextApiRequest, NextApiResponse } from "next";export default async function handler( req: NextApiRequest, res: NextApiResponse<{ id: string }>) { const handle = await tasks.trigger<typeof helloWorldTask>( "hello-world", "James" ); res.status(200).json(handle);}
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:
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
Copy
Ask AI
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 variablesexport 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`, }; } },});