When using Rudderstack to collect and send data to different destinations, you might run into issues with ad blockers that prevent the collection of JavaScript-based page views. In this blog post, I'll walk through how to create a proxy for Rudderstack using Verceland Next.js 13 with app directory to get around the problem.

1. Installing the SDK:

First, install the Rudderstack SDK package in your project.

2. Initializing Rudderstack:

Next, initialize Rudderstack and set an API for the data plane and the config. Make sure to wrap this in an async function to avoid calling the window when running in Node.

3. Wrapping the Initialize in a Provider:

Wrap the initialize in a provider that runs only on the client. This component sets some context so you can access the Rudderstack analytics from the context instead of the window directly.

4. Building Two APIs:

Now, we need to create two APIs. One for tracking and the other for the source config.

Tracking API:

The tracking API is a POST request that proxies all the data. Make sure the request method is one of the allowed methods.

Source Config API:

The source config API checks the configuration from the source.

5. Testing the Proxy:

To test the proxy, open the browser and check that the request to api.rudderlabs.com is blocked. Use request blocking if you want to simulate an Ad Blocker.

After reloading the page, you should see the source config data from the API.

Now, trigger some events (use the JavaScript console and `window.rudderAnalytics.track()`) and check that the page request and track get a 200 on the backend.

Finally, go to Rudderstack's live events monitor and verify that your events appear there.

By following these steps, you can create a proxy for Rudderstack using Vercel and Next.js 13 that bypasses ad blockers, allowing you to collect JavaScript-based page views and event data without interruption.