Proxy Seline with Next.js

Some ad blockers prevent requests to third-party domains, which can stop our script from loading or tracking. To avoid this, you can route our script and its requests through your own (first-party) domain. You'll need to map our script from a url like sln.yourdomain.com/seline.js to cdn.seline.so/seline.js, and redirect all requests sent by the script to our servers from sln.yourdomain.com to api.seline.so.

That's possible by using Next.js rewrites. Read more about rewrites in this Next.js documentation.

Step 1. Update Next.js config

Add the following rewrites to your next.config.js, you may change the sources if you wish.

const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/sln.js',
        destination: 'https://cdn.seline.so/seline.js',
      },
      {
        source: '/_sln/:path*',
        destination: 'https://api.seline.so/:path*',
      },
    ]
  },
};

module.exports = nextConfig;

Step 2. Update Seline script

Update our script with new src, and add a data-api-host attribute.

<Script src="/sln.js" data-api-host="/_sln" async />

Deploy the changes and you're all set! Now all requests from our script will go through your first-party domain, and ad blockers won't block them.

If you're using our @seline-analytics/web library, you can set the apiHost during the initialization.

import * as seline from "@seline-analytics/web";

...

seline.init({
  token: "PROJECTTOKEN",
  apiHost: '/_sln',
});