Setting up a proxy using Next.js

Optimize tracking by proxying data via Next.js.

If you’re using Next.js, it’s quite easy to proxy the traffic through your own domain, checkout the guide below.

Setup

Next.js Configuration

First you have to add two rewrite rules to the rewrites function in your next.config.js file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/_v_script.js',
        destination: 'https://cdn.vemetric.com/main.js',
      },
      {
        source: '/_v/:slug',
        destination: 'https://hub.vemetric.com/:slug',
      },
    ];
  },
};

module.exports = nextConfig;

Configure Vemetric

Depending on your setup you need to adjust the Vemetric configuration:

HTML Script

The src attribute of the Script tag (we’re using the Next.js Script component in this example) should now point to /_v_script.js. You also need to pass the data-host attribute with the value of /_v

import Script from 'next/script';

<script>
  window.vmtrcq = window.vmtrcq || [];
  window.vmtrc = window.vmtrc || function (){window.vmtrcq.push(Array.prototype.slice.call(arguments))};
</script>
<Script defer src="/_v_script.js" data-host="/_v" data-token="YOUR_PROJECT_TOKEN"></Script>

NPM Package

For the NPM package you need to pass the host option to the init function with the value of /_v

import { vemetric } from '@vemetric/browser';

vemetric.init({
  token: 'YOUR_PROJECT_TOKEN',
  host: '/_v',
});

Congratulations! You’ve successfully set up a proxy using Next.js. Please reach out if you have any questions.

Track across subdomains

Learn how to track users seamlessly across multiple subdomains with Vemetric.

Vercel

Optimize tracking by proxying data via Vercel.