Trigger Vercel Functions from database changes

Add a new API route to your project. For example, create a new file called api/hello.ts and add 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 (which contains the database row that changed) and logs the name from the payload to the console.

Add the SEQUIN_WEBHOOK_SECRET environment variable to a .env.local file in your project root. You can create any secret value here, but make sure to keep it secure.

SEQUIN_WEBHOOK_SECRET=your-secret-value

You will need to set this secret value in the Sequin dashboard when you create the push consumer.

Start your local development server with the following command:

npm run dev

This will typically start the development server on http://localhost:3000.

1. Login to your Sequin account and click the Add New Database button.
2. Enter the connection details for your Postgres database.

3. Follow the instructions to create a publication and a replication slot by running two SQL commands in your database:

create publication sequin_pub for all tables;
select pg_create_logical_replication_slot('sequin_slot', 'pgoutput');

4. Name your database and click the Connect Database button.

Sequin will connect to your database and ensure that it’s configured properly.

Now, create a tunnel to your local endpoint so Sequin can deliver change payloads to your local API:

1. In the Sequin console, open the HTTP Endpoint tab and click the Create HTTP Endpoint button.
2. 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

3. Now, 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.
4. Click Create HTTP Endpoint.

Create a push consumer that will capture users from your database and deliver them to your local endpoint:

1. Navigate to the Consumers tab and click the Create Consumer button.
2. Select your users table (i.e public.users).
3. For this guide, you want to capture all changes to the users table. To do this, select Changes and click Continue.
4. On the next screen, select Push to have Sequin send the events to your webhook URL. Click Continue.
5. Now, give your consumer a name (i.e. users_push_consumer) and in the HTTP Endpoint section select the local-endpoint you created above. Add the exact API route you created in the previous step (i.e. /api/hello):

7. Click the Create Consumer button.

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 consumer 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 Push consumer 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.