Vercel (Next.js)

The DataDome module for Vercel detects bot activity and protects you against it

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.


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

  1. Update other settings if needed
  2. Redeploy your Vercel app

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


DATADOME_SERVER_SIDE_KEYYour DataDome server-side key""
DATADOME_TIMEOUTThe timeout limit for requests sent to the DataDome API, in milliseconds300
DATADOME_URI_REGEX_EXCLUSIONIgnores all matching URIsExtensions for static assets


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_.