Opentelemetry Next.js app router implemenetation

Question

I got stuck with current project, because of the issue I have with implementing opentelemetry with next.js app router.

Our backend is stored in Django and it's already providing opentelemetry properly. The case is to also get information from frontend part that is written in next.js.

Both applications are stored in GoogleCloud so it's obvious that there is a possibility to pass information from opentelemetry into google tracer. Is there any chance that anybody knows how to do it ? the case is to not use server.js file that is defined as below to do so, but rather get information from browser how does it look like in terms of performance or any issues.

const dotenv = require("dotenv");
const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");

dotenv.config({
  path: `.env.${process.env.NODE_ENV}`,
});

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

const backendServiceInternalIP = process.env.NEXT_PUBLIC_API_BASE_URL;

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    if (pathname.startsWith("/api")) {
      const target = `${backendServiceInternalIP}`;
      createProxyMiddleware({ target, changeOrigin: true })(req, res);
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log("> Ready on http://localhost:3000");
  });
});

Or maybe I'm wrong and it suppose to be defined in this file. Looking forward for any tips or solution :)