# Vercel

Routing Middleware serves the script from your domain, passes its counts on, and names the visitor from what Vercel knows of them.

Add Routing Middleware, a `middleware.js` at the root of your project, which names the visitor from what Vercel knows of them. Install `@vercel/functions` for it:

```
import { geolocation, ipAddress, rewrite } from '@vercel/functions';

export const config = { matcher: ['/js/tally.js', '/api/tally'] };

export default function middleware(request) {
  const { pathname } = new URL(request.url);
  const headers = new Headers(request.headers);
  headers.delete('cookie');
  headers.delete('authorization');
  const place = geolocation(request);
  const visitor = {
    'X-Fivebar-IP': ipAddress(request),
    'X-Fivebar-Country': place.country,
    'X-Fivebar-City': place.city,
  };
  for (const [name, value] of Object.entries(visitor)) {
    if (value) headers.set(name, encodeURIComponent(value));
  }
  return rewrite(new URL(pathname, 'https://fiveb.ar'), { request: { headers } });
}
```

With Next.js, put the same in `middleware.js` (`proxy.js` from Next.js 16), returning `NextResponse.rewrite(url, { request: { headers } })` in place of `rewrite()`. Two rewrites in `vercel.json` would proxy the paths too, but Vercel doesn’t say that they pass on where the visitor is. If Cloudflare is in front of your Vercel site, Vercel sees Cloudflare rather than the visitor, so use the [Cloudflare recipe](https://fiveb.ar/docs/proxy/cloudflare.md) instead. See [Vercel’s help on Routing Middleware](https://vercel.com/docs/routing-middleware).

Hosted anywhere but Vercel, Next.js’s own `rewrites()` don’t pass on the visitor’s address, so every visitor would count as one. Proxy with whatever is in front of it instead, such as [nginx](https://fiveb.ar/docs/proxy/nginx.md) or [Caddy](https://fiveb.ar/docs/proxy/caddy.md).

## Load the script

Once the proxy is live, load the script from your own domain. It sends its counts to the host it was loaded from, so nothing else changes:

```
<script async data-domain="example.com" src="/js/tally.js"></script>
```

Then [check it works](https://fiveb.ar/docs/proxy.md#check-it-works). If either path is already taken on your site, see [Other paths](https://fiveb.ar/docs/proxy.md#other-paths). [Proxying](https://fiveb.ar/docs/proxy.md) says how it works and which headers name the visitor.

---

fivebar is web analytics without cookies, at https://fiveb.ar. Every page of its docs is listed at https://fiveb.ar/docs/index.md.