Next.js Proxy

Leiten Sie usertrax über Ihre Next.js-Anwendung mit eingebauten Rewrites.

Rewrites in next.config.js hinzufügen

Erstellen oder aktualisieren Sie next.config.js im Projektroot:

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/cvs.js",
        destination: "https://usertrax.io/cvs.js",
      },
      {
        source: "/api/usertrax/events",
        destination: "https://api.usertrax.io/api/events",
      },
    ];
  },
};

module.exports = nextConfig;

Next.js leitet Request-Body und Header automatisch weiter, inkl. X-Auth-Key.

Wenn Sie /api/usertrax/events bereits für Ihre eigene API nutzen, wählen Sie einen anderen Pfad (z. B. /api/ut/events) und setzen Sie denselben Pfad in usertraxConfig.endpoint.

Script-Tag anpassen

App Router — in app/layout.tsx:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="de">
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `window.usertraxConfig = { endpoint: "/api/usertrax/events" };`,
          }}
        />
        <script
          src="/cvs.js"
          data-key={process.env.NEXT_PUBLIC_USERTRAX_KEY}
          defer
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pages Router — in pages/_document.tsx:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="de">
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `window.usertraxConfig = { endpoint: "/api/usertrax/events" };`,
          }}
        />
        <script
          src="/cvs.js"
          data-key={process.env.NEXT_PUBLIC_USERTRAX_KEY}
          defer
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Deployen
Rewrites sind nach dem Deployment auf Vercel, Netlify und anderen Next.js-Hosts automatisch aktiv.

Verifizierung

Website besuchen
Network-Tab in den DevTools öffnen
Prüfen, dass cvs.js und Event-POSTs Ihre Domain nutzen, nicht usertrax.io oder api.usertrax.io

Fehlerbehebung

401-Fehler: data-key prüfen und Rewrites verifizieren
Rewrites lokal inaktiv: Dev-Server nach Änderung an next.config.js neu starten