Trigger Vercel Functions from database changes

Create a new Next.js project if you don’t have one:

npx create-next-app@latest --typescript

Create a new API route at app/api/hello/route.ts with the following code:

export const dynamic = 'force-dynamic';

export async function POST(request: Request) {
  const authHeader = request.headers.get('authorization');
  if (!authHeader || authHeader !== `Bearer ${process.env.SEQUIN_WEBHOOK_SECRET}`) {
    return new Response('Unauthorized', { status: 401 });
  }

  try {
    const payload = await request.json();
    const { record } = payload;

    if (record && record.name) {
      console.log(`Hello ${record.name}`);
    } else {
      console.log('No name found in the payload.');
    }

    return new Response('Success', { status: 200 });
  } catch (error) {
    console.error('Error processing request:', error);
    return new Response('Internal Server Error', { status: 500 });
  }
}

This function first checks the authorization header to make sure the request is coming from Sequin. Then it processes the payload and logs the name from the payload to the console.

Create a .env.local file in your project root and add:

SEQUIN_WEBHOOK_SECRET=your-secret-value

Create a secret and set it as the SEQUIN_WEBHOOK_SECRET environment variable. You will need to use this secret value in the Sequin dashboard when you create the webhook sink.

1. Install the Vercel CLI if you haven’t already:

npm install -g vercel

2. Deploy your app:

vercel

3. In the Vercel dashboard, add the SEQUIN_WEBHOOK_SECRET environment variable with the same value you used locally.

Copy your deployment URL. You will need this URL when creating the webhook sink.

In the Sequin web console, open the “HTTP Endpoint” tab and click the “Create HTTP Endpoint” button.

Enter a name for your endpoint (i.e. local_endpoint) and flip the “Use localhost” switch. Follow the instructions in the Sequin console to install the Sequin CLI, then run:

sequin tunnel --ports=3000:local-endpoint

Back in the Sequin web console, click “Add encryption header” and set the key to Authorization and the value to Bearer SEQUIN_WEBHOOK_SECRET using the secret value you created above.

Click “Create HTTP Endpoint”.

Navigate to the “Sinks” tab, click the “Create Sink” button, and select “Webhook Sink”.

Select the table you want to capture changes from (i.e public.users).

Specify whether you want to receive changes or rows from the table.

If you selected changes, in “Records to process”, you can indicate whether you want to receive insert, update, and/or delete changes. Select all three for now. No need to add a filter.

You can optionally indicate if you want your webhook endpoint to receive a backfill of all or a portion of the table’s existing data. For now, leave “Backfill” toggled off.

Under “Message grouping”, leave the default option selected to ensure events for the same row are sent to your webhook endpoint in order.

Under “Delivery configuration”, choose a conservative value for “Request timeout” and set “Batch size” to 1 since we’re just logging messages.

Under “HTTP Endpoint”, enter the Sequin HTTP endpoint you created above. Then click to “Add Encrypted Header” with the key Authorization and the value Bearer SEQUIN_WEBHOOK_SECRET, using the secret value you set in your Lambda function’s environment variables.

Give your sink a name (i.e. users_webhook_sink) and click “Create Webhook Sink”.

1. The Next.js app is running: npm run dev
2. The Sequin tunnel is running: sequin tunnel --ports=3000:local_endpoint

In the Sequin console, open the “Messages” tab on your webhook sink and confirm that a message was delivered:

In your local terminal, you should see a 200 response in your Next.js app:

POST /api/hello 200 in 242ms

1. If you haven’t already, install the Vercel CLI:

npm install -g vercel

2. Run the following command to deploy your Next.js app to Vercel:

vercel

Follow the prompts to link your project to a Vercel account and deploy your app. Vercel will provide you with a deployment URL once the process is complete.

1. In the Vercel dashboard, navigate to your project and click on the “Settings” tab.

2. Under the “Environment Variables” section, click the “Add” button.

3. Add a new environment variable with the following details:

   • “Environment”: Select “Production” (and optionally “Preview” and “Development” if you want to use the same secret in those environments)
   • “Key”: SEQUIN_WEBHOOK_SECRET
   • ”Value”: your-secret-value (use the same value you set in your .env.local file)

4. Click “Save” to add the environment variable.

In the Sequin console, create a new webhook sink that points to your Vercel Function’s HTTP endpoint.

1. After setting the environment variable, trigger a database change (e.g., insert a new user) to ensure that Sequin can successfully send events to your deployed Vercel Function.
2. Check the logs in the Vercel dashboard to confirm that your function is receiving the events and processing them correctly.