Triggering tasks with webhooks in Next.js

​

Prerequisites

• A Next.js project, set up with Trigger.dev
• cURL installed on your local machine. This will be used to send a POST request to your webhook handler.

​

Adding the webhook handler

The webhook handler in this guide will be an API route.

This will be different depending on whether you are using the Next.js pages router or the app router.

​

Pages router: creating the webhook handler

Create a new file pages/api/webhook-handler.ts or pages/api/webhook-hander.js.

In your new file, add the following code:

import { 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) {
  // Parse the webhook payload
  const payload = req.body;

  // Trigger the helloWorldTask with the webhook data as the payload
  await tasks.trigger<typeof helloWorldTask>("hello-world", payload);

  res.status(200).json({ message: "OK" });
}

This code will handle the webhook payload and trigger the ‘Hello World’ task.

​

App router: creating the webhook handler

Create a new file in the app/api/webhook-handler/route.ts or app/api/webhook-handler/route.js.

In your new file, add the following code:

import type { helloWorldTask } from "@/trigger/example";
import { tasks } from "@trigger.dev/sdk/v3";
import { NextResponse } from "next/server";

export async function POST(req: Request) {
  // Parse the webhook payload
  const payload = await req.json();

  // Trigger the helloWorldTask with the webhook data as the payload
  await tasks.trigger<typeof helloWorldTask>("hello-world", payload);

  return NextResponse.json("OK", { status: 200 });
}

This code will handle the webhook payload and trigger the ‘Hello World’ task.

​

Triggering the task locally

Now that you have your webhook handler set up, you can trigger the ‘Hello World’ task from it. We will do this locally using cURL.

curl -X POST -H "Content-Type: application/json" -d '{"Name": "John Doe", "Age": "87"}' http://localhost:3000/api/webhook-handler