Inhaltsverzeichnis
Inspiriert von vielen Blogs, die auf jeder Seite einen hübschen Zähler für die Seitenaufrufe anzeigen, wollte ich eine solche Funktion auch für meinen Blog entwickeln. Ich verwende auch Next.js 14 mit dem neuen App-Router, aber anstatt die Seitenaufrufe in einer relationalen Datenbank wie PostgreSQL zu speichern, werde ich Upstash Redis verwenden.
Hier ist das GitHub repo mit dem vollständigen Code.
Beispielseite -> https://nextjs14-azureb2c-prisma.vercel.app/
Warum Redis und nicht eine relationale DB wie PostgreSQL?
Redis bietet großartige Befehle, die das Deduplizieren und Inkrementieren eines Zählers erleichtern, was für die Genauigkeit entscheidend ist.
Ich möchte das Inkrementieren des Zählers entprellen, um einen genaueren Zähler zu erhalten. Wenn ein Benutzer die Seite auffrischt, sollte der Zähler nur einmal erhöht werden. Dies lässt sich mit dem SET-Befehl von Redis leicht bewerkstelligen. Er hat eine NX-Option, die den Schlüssel nur setzt, wenn er noch nicht existiert, und eine EX-Option, die den Schlüssel nach einer bestimmten Anzahl von Sekunden ablaufen lässt. Indem wir beide Optionen kombinieren, können wir sicherstellen, dass ein einzelner Benutzer den Zähler innerhalb eines bestimmten Zeitraums nicht mehrfach erhöhen kann.
Der zweite Befehl ist INCR, der einen gegebenen Schlüssel atomar um 1 inkrementiert. Und zu guter Letzt können wir diese Aufgabe von unserer "Standard"-Relationalen-DB auslagern.
Next.js Api Route für Redis-Operationen
Wir erstellen die Datei src/app/api/viewcount, in die wir unsere Redis Lib-Datei importieren, die wir im vorherigen Beitrag erstellt haben.
Upstash Redis NPM-Paket
Das Gleiche gilt für das benötigte Upstash Redis NPM-Paket, das wir im vorherigen Beitrag installiert haben.
Vercel EDGE
Upstash und @upstash/redis sind mit den Edge-Funktionen von Vercel kompatibel, also importieren wir zunächst alles, was wir brauchen, richten Redis ein und konfigurieren die Runtime als Edge.
Neue Tracking-Komponente "viewcount.tsx"
Wir übergeben das Slug-Attribut an die zuvor erstellte API-Route mit "UseEffect".
Projektintegration "page.tsx"
Als letzten Schritt müssen wir die neue Komponente in unser Next.js 14 Projekt integrieren.
Redis Lib und viewcount Komponente importieren
Definieren der Konstanten Views in Zeile 222
Verwendung einer importierten Komponente in Zeile 243
Anzeigen von Ansichten auf der Unterseite (Zeile 282)
Nachstehend der vollständige Code (page.tsx)
Das war's. Wir haben innerhalb weniger Minuten einen einfachen und blitzschnellen View Counter gebaut und integriert. Natürlich gibt es Raum für eine Stilverbesserung, etc., aber von einem funktionalen POV, es funktioniert großartig.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
