This application demonstrates using the Hookdeck Vercel Middleware within a Next.js project.

Getting Started

• Create a Vercel account and a project.
• Install the Vercel CLI
• Signup for a Hookdeck account

Get the code

npx create-next-app -e https://github.com/hookdeck/hookdeck-vercel-example hookdeck-vercel-example
cd hookdeck-vercel-example
npm i

Create your Vercel project

Use the Vercel CLI to set up a Vercel project.

vercel link

Add a --yes flag if you want to skip the interactive options.

vercel link --yes

Set your Vercel project environment variables

Add HOOKDECK_API_KEY and HOOKDECK_SIGNING_SECRET (optional but recommended) as environment variables for your Vercel project.

Get the Hookdeck API key and Signing Secret from your project secrets.

vercel env add HOOKDECK_API_KEY production

vercel env add HOOKDECK_SIGNING_SECRET production

The above commands will prompt you for the values.

Deploy your application

Deploy to the production environment:

vercel --prod

Within the output, you'll see your Inspect URL.

Make an Asynchronous HTTP request

Navigate to the *Inspect** URL and get your production {domain}.vercel.app URL.

All other deployment URLs will be protected by default. You can change this in settings if you prefer.

Use that URL to make a request to your middleware endpoint:

curl --location 'https://{domain}}.vercel.app/api/webhooks' \
--header 'Content-Type: application/json' \
--data '{
    "test": "value"
}'

You will see output similar to the following:

{
  "status": "SUCCESS",
  "message": "Request successfully handled. Request ID: req_nlwiPJSOTRFb6vHYlVez",
  "request_id": "req_nlwiPJSOTRFb6vHYlVez"
}

Checkout the logs

The Vercel logs to see the middleware logging:

The Hookdeck request logs to see the inbound requests:

The Hookdeck event logs to see the generated events and event deliveries:

Learn More

• Hookdeck Vercel Middleware repo
• Hookdeck documentation
• Vercel Middleware documentation
• Next.js documentation

Deploy on Vercel

Fork this repository and click the Deploy button.