Webhook guides

docs/guides/frameworks/supabase-edge-functions-basic.mdx

@@ -17,6 +17,11 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md
 import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx";
 import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx";
 
+<Info>
+  The project created in this guide can be found in this [GitHub
+  repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase).
+</Info>
+
 ## Overview
 
 Supabase edge functions allow you to trigger tasks either when an event is sent from a third party (e.g. when a new Stripe payment is processed, when a new user signs up to a service, etc), or when there are any changes or updates to your Supabase database.

docs/guides/frameworks/supabase-edge-functions-database-webhooks.mdx

@@ -13,6 +13,11 @@ import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.md
 import WorkerFailedToStartWhenRunningDevCommand from "/snippets/worker-failed-to-start.mdx";
 import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx";
 
+<Info>
+  The project created in this guide can be found in this [GitHub
+  repo](https://github.com/triggerdotdev/example-projects/tree/main/supabase).
+</Info>
+
 ## Overview
 
 Supabase and Trigger.dev can be used together to create powerful workflows triggered by real-time changes in your database tables:

docs/guides/frameworks/webhooks.mdx

@@ -0,0 +1,143 @@
+---
+title: "Setting up webhooks"
+sidebarTitle: "Webhooks"
+description: "Guides for using webhooks with Trigger.dev."
+icon: "webhook"
+---
+
+## Overview
+
+Webhooks are a way to send and receive events from external services. Triggering tasks using webhooks allow you to add real-time, event driven functionality to your app.
+
+A webhook handler is code that executes in response to an event. They can be endpoints in your framework's routing which will be triggered by an external service, for example.
+
+In this guide you'll learn how to set up webhook handlers and trigger tasks from them using popular frameworks.
+
+## Frameworks featured in this guide
+
+- [Next.js](/guides/frameworks/webhooks#nextjs-webhook-configuration), pages or app router
+- [Remix](/guides/frameworks/webhooks#remix-webhook-configuration)
+
+<Note>
+  If you would like to see a webhook guide for your framework, please request it in our [Discord
+  server](https://trigger.dev/discord).
+</Note>
+
+## Next.js webhook configuration
+
+### Prerequisites
+
+- [A Next.js project, set up with Trigger.dev](/guides/frameworks/nextjs)
+- [cURL](https://curl.se/) installed on your local machine. This will be used to send a POST request to your webhook handler.
+
+### Adding a webhook handler
+
+The webhook handler will be an API route. The location of the route file will be different depending on whether you are using the pages router or the app router.
+
+- **Pages router** - create a new file `pages/api/webhook-handler.ts` or `pages/api/webhook-hander.js`.
+
+- **App router** - create a new file in the `app/api/webhook-handler/route.ts` or `app/api/webhook-handler/route.js`.
+
+The handler code will be the same for both routers. In this guide will use the 'Hello World' task as the example.
+
+In your new file, add the following code:
+
+```ts
+import type { helloWorldTask } from "@/trigger/example";
+import { tasks } from "@trigger.dev/sdk/v3";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  try {
+    // Parse the webhook payload
+    const webhookData = await req.json();
+
+    // Trigger the helloWorldTask with the webhook data as the payload
+    const handle = await tasks.trigger<typeof helloWorldTask>("hello-world", webhookData);
+
+    return NextResponse.json({ result: handle, ok: true });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json({ message: "something went wrong", ok: false }, { status: 500 });
+  }
+}
+```
+
+### Triggering a task locally
+
+Now that you have a webhook handler set up, you can trigger the 'Hello World' task from it. We will do this locally using cURL.
+
+<Steps>
+
+<Step title="Run your Next.js app and the Trigger.dev dev server">
+
+First, run your Next.js app.
+
+<CodeGroup>
+
+    ```bash npm
+    npm run dev
+    ```
+
+    ```bash pnpm
+    pnpm run dev
+    ```
+
+    ```bash yarn
+    yarn dev
+    ```
+
+</CodeGroup>
+
+Then, open up a second terminal window and start the Trigger.dev dev server:
+
+<CodeGroup>
+
+    ```bash npm
+    npx trigger.dev@latest dev
+    ```
+
+    ```bash pnpm
+    pnpm dlx trigger.dev@latest dev
+    ```
+
+    ```bash yarn
+    yarn dlx trigger.dev@latest dev
+    ```
+
+    </CodeGroup>
+
+</Step>
+
+<Step title="Trigger the webhook with some dummy data">
+
+To send a POST request to your webhook handler, open up a terminal window on your local machine and run the following command:π
+
+<Tip>
+  If `http://localhost:3000` isn't the URL of your locally running Next.js app, replace the URL with
+  that URL instead.
+</Tip>
+
+```bash
+curl -X POST -H "Content-Type: application/json" -d '{"Name": "John Doe", "Age": "87"}' http://localhost:3000/api/webhook-handler
+```
+
+This will send a POST request to your webhook handler, with a JSON payload.
+
+</Step>
+
+<Step title="Check the task ran successfully">
+
+After running the command, you should see a successful dev run and a 200 response in your terminals.
+
+If you now go to your [Trigger.dev dashboard](https://cloud.trigger.dev), you should also see a successful run for the 'Hello World' task, with the payload you sent, in this case; `{"name": "John Doe", "age": "87"}`.
+
+</Step>
+
+</Steps>
+
+## Remix webhook configuration
+
+### Prerequisites
+
+- [A Remix project, set up with Trigger.dev](/guides/frameworks/remix)

docs/guides/introduction.mdx

@@ -24,10 +24,13 @@ import CardSupabase from "/snippets/card-supabase.mdx";
 
 Get set up fast using our detailed walk-through guides.
 
-| Guide                                                 | Description                                                                      |
-| :---------------------------------------------------- | :------------------------------------------------------------------------------- |
-| [Prisma](/guides/frameworks/prisma)                   | This guide will show you how to setup Prisma with Trigger.dev                    |
-| [Sequin database triggers](/guides/frameworks/sequin) | This guide will show you how to trigger tasks from database changes using Sequin |
+| Guide                                                                                       | Description                                                   |
+| :------------------------------------------------------------------------------------------ | :------------------------------------------------------------ |
+| [Prisma](/guides/frameworks/prisma)                                                         | How to setup Prisma with Trigger.dev                          |
+| [Sequin database triggers](/guides/frameworks/sequin)                                       | How to trigger tasks from database changes using Sequin       |
+| [Supabase edge function hello world](/guides/frameworks/supabase-edge-function-hello-world) | How to trigger a task from a Supabase edge function           |
+| [Supabase database webhooks](/guides/frameworks/supabase-database-webhooks)                 | How to trigger a task using a Supabase database webhook       |
+| [Webhooks](/guides/frameworks/webhooks)                                                     | How to setup webhooks with Trigger.dev and various frameworks |
 
 ## Example tasks
 

docs/mint.json

@@ -285,7 +285,8 @@
             "guides/frameworks/supabase-edge-functions-basic",
             "guides/frameworks/supabase-edge-functions-database-webhooks"
           ]
-        }
+        },
+        "guides/frameworks/webhooks"
       ]
     },
     {