Bot Protection with DataDome

Bot Protection with DataDome is a Next.js edge middleware template that protects websites from malicious bots in real time by running DataDome's detection service at the edge of Vercel's network.

What is Bot Protection with DataDome?

This template is a reference implementation from Vercel's examples repository for adding bot protection to a Next.js application. It takes incoming web traffic and, using DataDome's real-time bot detection, distinguishes human users from bots before requests reach your origin. The template uses Tailwind CSS for styling and is designed to be deployed on Vercel, either through a one-click deploy or by cloning the repository.

What makes this template stand out?

• Edge-enforced bot filtering — The protection runs on Vercel's edge network, so bot traffic is blocked early, reducing load on your origin server.
• DataDome integration — DataDome is a managed service that provides real-time bot protection and other security protections; the template handles wiring both client-side and server-side keys.
• Two required environment variables — You need NEXT_PUBLIC_DATADOME_CLIENT_SIDE_KEY and DATADOME_SERVER_SIDE_KEY, which you copy from your DataDome dashboard at app.datadome.co/dashboard/config/protection/keys.
• Simple onboarding — The README walks you through creating a DataDome account, copying .env.example to .env.local, setting keys, running pnpm dev, and deploying with Vercel.
• Live demo — A production demo is available at https://edge-functions-bot-protection-datadome.vercel.app.

Who should use it?

• Next.js developers who want a working pattern for adding bot protection to a Vercel deployment without building detection from scratch.
• Website operators that deal with scrapers or credential-stuffing attacks and want to test DataDome's edge enforcement quickly.
• Security engineers evaluating managed bot-detection services need a minimal sample to compare integration effort and effectiveness.

What can you do with it?

• Deploy a fully working example in minutes using the Vercel Deploy button, which sets the environment variables automatically.
• Integrate the same logic into an existing Next.js project by copying the environment variable setup and middleware pattern from this template.
• Compare with the related template Bot Protection with BotD, which is another Vercel edge middleware example and uses a different bot detection approach.

How does it work?

You start by creating a DataDome account and locating your keys in the DataDome dashboard. Then you copy the example environment file, fill in the two key values, and run pnpm dev to test locally. When you're ready, you deploy the project to Vercel and the edge middleware enforces DataDome's decisions on every request.

Frequently Asked Questions

What environment variables does this template need?

It requires NEXT_PUBLIC_DATADOME_CLIENT_SIDE_KEY and DATADOME_SERVER_SIDE_KEY. Both values are found in your DataDome dashboard at app.datadome.co/dashboard/config/protection/keys, and you paste them into .env.local.

How do I deploy this template?

You can click the Vercel Deploy button on the template page, which clones the repository and prompts you to enter the two environment variables. Alternatively, bootstrap locally with pnpm create next-app --example ... and deploy with Vercel afterwards.

What is the relationship to Bot Protection with BotD?

Both are Vercel edge middleware templates for bot detection. This template uses DataDome's managed service, while the BotD template is a related example in the same repository, representing an alternative integration approach.