Next.js proxy

Proxy attribu.tech analytics through your Next.js app to bypass ad blockers.

This works with both Vercel and self-hosted Next.js. See Proxy the tracking script for an overview of why and how proxying works.

Step 1: Add rewrites to your config

Open your next.config.js (or next.config.mjs) and add a rewrites function:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/js/script.js",
        destination: "https://attribu.tech/js/script.js",
      },
      {
        source: "/api/proxy/events",
        destination: "https://attribu.tech/api/events",
      },
    ];
  },
};

module.exports = nextConfig;

If you already use /api/events in your app, use a different path like /api/proxy/events and set data-api-url on the script tag to match.

Step 2: Update your script tag

Point the script src to your proxied path and set data-api-url to your proxied API endpoint:

<script
  defer
  data-website-id="YOUR_SITE_ID"
  data-domain="yourdomain.com"
  data-api-url="/api/proxy/events"
  src="/js/script.js"
></script>

Replace YOUR_SITE_ID with your actual Website ID from attribu.tech. Replace yourdomain.com with your website's root domain.

Step 3: Deploy

That's it. Next.js rewrites work automatically on both Vercel and self-hosted deployments. Push your changes and the proxy is live.

Verify installation

Visit your site in an incognito/private window.
Open your browser's Developer Tools and go to the Network tab.
Confirm the script loads from /js/script.js on your domain.
Confirm the pageview POST goes to /api/proxy/events on your domain.
Check your attribu.tech dashboard. A new pageview should appear within a few seconds.

Troubleshooting

All visitors show the same location - Next.js rewrites on Vercel automatically forward the visitor's IP. If you are self-hosting behind a reverse proxy, make sure it sets the X-Forwarded-For header correctly.
Script loads but no pageviews - Verify the /api/proxy/events rewrite is configured. Check that there is no conflicting API route at the same path.
Rewrites not applying - Restart your dev server after editing next.config.js. Config changes require a restart.

What's next

Back to proxy overview
Connect Stripe to attribute revenue to traffic sources.