Next.js 14 -Erweiterte Analytik mit Tinybird und integriertem Dashboard

In dieser Story stellen wir Tinybird (https://www.tinybird.co/) vor, eine Datenplattform für benutzerorientierte Analysen. Wir integrieren das bereitgestellte Javascript-Snippet für die Datenerfassung und integrieren dann das Analytic Dashboard in unser bestehendes Nextjs 14-Projekt.

Hier ist das GitHub Repo mit dem gesamten Code und darunter der Link zur Beispielwebsite.

Beispielseite für mit integrierter Datenerfassung -> https://nextjs14-kafka-tracking.vercel.app/

Verwendeter Stack

Ich werde mit meinem Standard-Stack beginnen:

• Next.js 14 als Web-Framework, und ich werde die mitgelieferte Middleware Edge-Funktion verwenden

• TailwindCss for Styling

• Contentful CMS (Kostenloses Abo)

• Tinybird für das Erfassen und Analysieren der Daten

• Vercel für das Hosting

Neue und aktualisierte NPM Pakete

Wir müssen das neue Paket "swr - Stale while revalidate" installieren

Tinybird Plattform (BUILD Plan)

Wir werden den kostenlosen "Build Plan" verwenden, der sich hervorragend für Tests und kleine Projekte eignet. Im Folgenden finden Sie die Details des Plans.

• Bis zu 1000/req. am Tag

• 1 Kopier Pipeline

• Unbegrente GB für die Datenverarbeitung

• 10 GB max Speicherplatz

• Pro Workspace, pro Monat

Registrierung und Anmeldung - Erstellung eines neuen Workspace

1. Workspace Namen auswählen

2. Wir wählen “Starter kit” Web Analytics, damit Tinybird alle nötigen "Datenquellen und pipelines" erstellt

Tinybird JS-Snippet

Sobald der Arbeitsbereich fertig ist, sehen Sie das JS-Snippet, das wir in unser Projekt integrieren müssen.

Die Integration kann über einen Tag-Manager (Google, Piwik, etc.) oder direkt mit einer neuen Komponente erfolgen.

Neue Tinybird tracking Komponente

Ich habe beschlossen, dies mit einer neuen Komponente zu tun. Damit es funktioniert, müssen Sie eine neue Umgebungsvariable mit dem Namen "NEXT_PUBLIC_TINYBIRD_AUTH_TOKEN" erstellen und das Token aus dem Js-Snippet kopieren und einfügen

Mit der neuen Tracking-Komponente können wir zu unserer layout.tsx (src/app/[locale]/) gehen und die Komponente importieren

Tinybird workspace mit gesammelten Daten

Wenn der Code implementiert ist, sehen Sie, wie die Daten in Ihren Tinybird Arbeitsbereich fließen.

Mit diesem Schritt ist der Teil der Datenerfassung abgeschlossen, und wir können zum Teil der Dashboard-Erstellung übergehen.

Neue Komponenten/Types/Hooks/Types und Themes erstellen

Wir erstellen einen neuen Ordner namens "webanalytics" unter src/components/ und legen dort alle neuen Komponenten ab. Unter src/lib platzieren wir drei neue Bibliotheken (config, apianalyitcs und utils). Zwei neue Konstanten sind jetzt unter src/lib/constants zu finden. Neue Hooks gibt es unter src/lib/hooks, neue Typen unter src/types und eine neue Themadatei unter src/styles/theme.

Dashboard Seite erstellen

Wir haben bereits eine Dashboard-Seite (src/app/[Gebietsschema]/dashborad/), die nur mit einem authentifizierten Benutzer und den entsprechenden Rechten zugänglich ist. Wir importieren zwei neue Komponenten.

Dashboard — Visualisierung und auskommentierte Abschnitte

Wie Sie sehen können, gibt es kommentierte Abschnitte, die ich in der nächsten Geschichte erklären werde.Ich lade im Wesentlichen zwei Komponenten, den Datumsfilter und die Widgets-Komponente, die dynamisch die restliche Komponente lädt.

Finales Dashbarod mit Basis-Widgets

Unten sehen Sie einen Screenshot mit den Basis-Widgets (KPIs, Top Pages und Top Browsers). Im nächsten Post werde ich weitere Widgets hinzufügen, um das Dashboard zu vervollständigen.

Cloudapp-dev und bevor Sie uns verlassen

Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:

Wenn Ihnen gefallen hat was Sie gelesen haben oder wenn es Ihnen sogar geholfen hat, dann würden wir uns über einen "Clap" 👏 oder einen neuen Follower auf unseren Medium Account sehr freuen.

Oder folgen Sie uns auf Twitter -> Cloudapp.dev