Embedded analytics: toevoegen aan Next.js App Router app

Samenvatting

ThoughtSpot embedded analytics werkt in Next.js App Router via een Client Component, met init() in de browser en tokens uit een Route Handler.

ThoughtSpot embedded analytics in Next.js

Next.js App Router rendert componenten standaard op de server. Daar bestaat window niet, terwijl de ThoughtSpot Visual Embed SDK een iframe in de browser opbouwt. Plaats de SDK daarom in een bestand met use client.

Dat Client Component roept init() één keer aan op moduleniveau, achter een controle met typeof window. Een Route Handler maakt de authenticatietokens aan. De Server Component-pagina rendert vervolgens het Client Component. De geteste combinatie bestaat uit Visual Embed SDK 1.53.1, Next.js 16.4.2 en 15.5.28 en React 19.3.1.

Waarom ThoughtSpot embedded analytics belangrijk is

De integratie vraagt volgens het artikel drie bestanden: een Client Component, een tokenroute en de pagina. Dat geeft een concreet criterium bij het vergelijken van embedded-analytics-tools: hoeveel verbindingscode en extra services houd je zelf bij?

De foutmeldingen maken de grens tussen server en browser scherp. init() aanroepen vanuit een Server Component breekt de build. Een useEffect in hetzelfde component als de embed werkt ook niet betrouwbaar, omdat React eerst het effect van het kind uitvoert. Daardoor start de embed vóór de initialisatie. De useInit-hook vertoont hetzelfde probleem in die opzet.

De SDK markeert zichzelf sinds versie 1.37.0 als use client. In tests veroorzaakte het importeren van versie 1.44.3 of hoger tijdens server rendering geen fout. Versies 1.36.4 tot en met 1.44.2 konden daarentegen ReferenceError: window is not defined geven.

Concrete takeaway

Splits de integratie direct op in drie bestanden, voer init() op moduleniveau uit en controleer de SDK-versie voordat je debugt. Test daarnaast de volledige opzet in je eigen Next.js-stack.