Skip to main content

Next.js Rewrites Proxy

Use Next.js rewrites to proxy the Ovyxa tracking script and event endpoint through your own domain. No separate proxy infrastructure needed.

Why Use Rewrites?​

Next.js rewrites act as a reverse proxy at the framework level. Requests to your domain are transparently forwarded to Ovyxa's servers, making analytics requests appear as first-party traffic. This bypasses most ad blockers.

Setup​

1. Configure Rewrites​

Add rewrites to your next.config.js (or next.config.mjs):

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/js/script.js',
        destination: 'https://ingest.ovyxa.com/js/script.js',
      },
      {
        source: '/api/event',
        destination: 'https://ingest.ovyxa.com/e',
      },
    ]
  },
}

module.exports = nextConfig

2. Update the Tracking Script​

In your root layout or _app.tsx, use the proxied paths:

<script
  async
  src="/js/script.js"
  data-domain="yourdomain.com"
  data-api="/api/event"
></script>

Or with Next.js Script component:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        <Script
          src="/js/script.js"
          data-domain="yourdomain.com"
          data-api="/api/event"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

App Router Example​

app/layout.tsx:

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        <Script
          src="/js/script.js"
          data-domain="yourdomain.com"
          data-api="/api/event"
          strategy="afterInteractive"
        />
      </head>
      <body>{children}</body>
    </html>
  )
}

Pages Router Example​

pages/_app.tsx:

import Script from 'next/script'
import type { AppProps } from 'next/app'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        src="/js/script.js"
        data-domain="yourdomain.com"
        data-api="/api/event"
        strategy="afterInteractive"
      />
      <Component {...pageProps} />
    </>
  )
}

Verification​

  1. Run next build && next start (rewrites don't work in next dev for external destinations)
  2. Visit http://localhost:3000/js/script.js — you should see the tracking script
  3. Open DevTools → Network tab — events should POST to /api/event on your domain
  4. Check your Ovyxa dashboard for incoming pageviews

Deploying on Vercel​

Next.js rewrites work on Vercel out of the box. No additional configuration needed — just deploy your updated next.config.js.

For Vercel-specific middleware proxy setup, see the Vercel Proxy Guide.

Troubleshooting​

Script not loading in development

  • Next.js rewrites to external URLs may not work in next dev. Test with next build && next start.

Events returning 404

  • Ensure the destination path is /e (Ovyxa's ingestion endpoint), not /api/event
  • Double-check the rewrite source matches your data-api attribute

CORS errors

  • Rewrites happen server-side so CORS should not be an issue. If you see CORS errors, verify the rewrite is actually being applied (check Next.js logs).