Next.js guide · Framework (React)

Marech for Next.js & React Apps

Add one script tag to monitor scraper traffic — then, because you own the deployment, block non-JS scrapers at the edge with Next.js middleware.

PlatformFramework (React)Setup~5 minutesBlockingSupported

How Marech protects a Next.js site

A Next.js or React app is code you deploy yourself, so you get both modes. The monitoring snippet goes into your root layout (or index.html for a plain React SPA), and because you control the server or edge, you can add a middleware check that returns a 403 to scrapers before your page is ever rendered.

Mode 1

Monitoring — the snippet

One line of JavaScript in your <head>. It reports scraper traffic to your dashboard and overlays JS-running bots. Works on Next.js in ~5 minutes.

Mode 2

Blocking — the edge check

A server-side check (Next.js / Vercel edge middleware) returns a 403 to scrapers before your content is served — the only thing that stops non-JS scrapers.

Before you begin

You'll need a couple of things ready. The monitoring step needs only the first two.

A Marech account — start a free trial (no credit card).
Access to edit your Next.js site's theme, settings, or code.
Your app deployed somewhere you control the edge — Vercel, Cloudflare, or your own server.

Install the monitoring snippet

One line of JavaScript that reports scraper traffic to your dashboard. Works on every Next.js plan and takes about ~5 minutes.

Next.js → app/layout.tsx (App Router) · pages/_document.tsx (Pages Router) · index.html (React SPA)

Copy your Marech snippet

After signing up, open your Marech dashboard and click "Get Snippet Code". Copy the one-line <script> tag (you'll add it to your app's <head>).

App Router: add it to your root layout

In app/layout.tsx, render the <script> inside the document <head>. You can drop the plain tag into <head>, or use next/script with strategy="afterInteractive" for finer control.

Pages Router: add it to _document

In pages/_document.tsx, place the <script> inside the <Head> element so it loads on every page.

Plain React (Vite / CRA): add it to index.html

Open public/index.html (CRA) or index.html (Vite) and paste the snippet inside the <head> tag.

Deploy

Ship your change (e.g. push to Vercel). Marech starts monitoring traffic in your dashboard as soon as the new build is live.

Verify monitoring is live

Load your deployed app in a browser and check the dashboard feed. View source on a rendered page and confirm the <script> tag is present in <head> — for SSR/SSG apps it should appear in the server-rendered HTML.

Monitoring vs. blocking — the honest version

The snippet above reports traffic and overlays JS-running bots — but non-JS scrapers (curl, python-requests, GPTBot…) download your HTML directly and never run it, so it can't block those. Because you deploy the app yourself, you can run the enforcement check at the edge. A middleware.ts at your project root checks each request before your page renders and returns a 403 to scrapers — the same contract the Cloudflare Worker and nginx proxy use. Full details in the integration guide.

Turn on real blocking (optional)

Stops non-JS scrapers before your content is served, using Next.js / Vercel edge middleware. Needs a Marech API key and a block policy.

Create an API key and a block policy

In the Marech dashboard, create an API key (shown once — copy it) and add a block policy (e.g. bot types scraper and ai_tool).

Set BLOCKME env vars in your host

Add BLOCKME_API_URL (https://api.marech.tech) and BLOCKME_API_KEY (your bm_ key) as environment variables in Vercel (or your host). Redeploy so they're available at the edge.

Add the BlockMe middleware

Copy the BlockMe middleware.ts from the marech-BD integrations/vercel folder to your project root and adjust the matcher to skip static assets. It POSTs each request to /v1/enforce and returns a 403 on a block verdict, failing open on any error.

Not on Vercel? Use the Cloudflare Worker

If your app is fronted by Cloudflare instead, deploy the BlockMe Cloudflare Worker on your zone route — it enforces the same policies without touching your app code.

Verify it's blocking. With middleware deployed, a fake GPTBot request returns a 403 while a real browser loads your app normally.

verify blocking

curl -A "GPTBot/1.0" -I https://yourapp.com/

Troubleshooting & FAQ

App Router or Pages Router — does it matter?

Not for blocking. Edge middleware (middleware.ts at the project root) works the same in both. For the monitoring snippet, App Router apps add it in app/layout.tsx and Pages Router apps in pages/_document.tsx.

Should I use middleware or a Cloudflare Worker?

If you deploy on Vercel, middleware.ts is the simplest — it lives in your repo and needs no extra infrastructure. If your domain is already fronted by Cloudflare, the Worker keeps enforcement out of your app entirely. Both call the same enforcement endpoint and enforce the same policies.

Does the snippet work with SSR and SSG?

Yes. It's a standard script tag in your <head>, so it ships in the server-rendered or statically generated HTML and runs in the visitor's browser. Remember that the snippet monitors; the middleware is what actually blocks non-JS scrapers.

Does the snippet slow down my site?

No. The script is tiny and loads asynchronously, so it never blocks your page from rendering. Server-side blocking adds a single fast check in front of your origin and fails open, so it can't slow down or take down your site.

Will it block real visitors or hurt SEO?

No. Marech targets automated scrapers, not people, and search engines you care about are allowed by default — you decide exactly what gets blocked with policies. See how detection works.

Next steps

How detection works

The signals Marech uses to tell scrapers from real visitors.

All platform guides

Compare setup and blocking support across every platform.

Write a block policy

Decide exactly which bots get stopped and where.

Plans & pricing

Free 7-day trial, then pick the plan that fits your traffic.

Ready to protect your Next.js site?

Free 7-day trial. No credit card required.