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:

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 id="vmtrc-scr" src="/_v_script.js" data-host="/_v" data-token={process.env.NEXT_PUBLIC_VEMETRIC_TOKEN!}></Script>

For the JavaScript SDK, you need to pass the scriptUrl and host options to the init function with the value of your proxy domain.

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

vemetric.init({
  token: process.env.NEXT_PUBLIC_VEMETRIC_TOKEN!,
  scriptUrl: '/_v_script.js',
  host: '/_v',
});

For the React SDK, you need to pass the scriptUrl and host props to the VemetricScript component with the value of your proxy domain.

import { VemetricScript } from '@vemetric/react';

<VemetricScript
  token={process.env.NEXT_PUBLIC_VEMETRIC_TOKEN!}
  scriptUrl="/_v_script.js"
  host="/_v"
/>

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

Using a proxy

Optimize tracking by proxying data through your own domain.

Vercel

Optimize tracking by proxying data via Vercel.