This module can be installed as a middleware with Vercel's Edge Functions and sends validation requests to the closest regional endpoints. Depending on how the API responds, the module either blocks the request or lets Vercel proceed with the intended backend.

This article will treat both server-side and client-side integrations.

Prerequisites

• The server-side key available in your DataDome dashboard

• The client-side key available in your DataDome dashboard

• Next.js 13+

How to install and configure

Vercel provides an example you can reuse to integrate DataDome inside your Vercel app.

1. Copy the lib folder from the example to your Vercel app
2. Update or create your own middleware to call the DataDome middleware (example)
3. Integrate DataDome's JavaScript tags inside your pages (example)
4. Add a DATADOME_SERVER_SIDE_KEY variable inside Your Vercel Project > Project Settings > Environment Variables with the server-side key that you can find in the Management section of your dashboard
5. Also add a NEXT_PUBLIC_DATADOME_CLIENT_SIDE_KEY variable with the client-side key from your dashboard

6. Update other settings if needed
7. Redeploy your Vercel app

Congratulations! Your website is now protected against bot traffic at the Edge.

Settings

📘

Environment variables for the browser

The DataDome client side key must be available in the browser, for this reason is must match the naming convention defined in the Nextjs documentation and be prefixed by NEXT_PUBLIC_.