Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Paginaweergaven zijn een belangrijke maatstaf voor het bijhouden van webprestaties. Softwaretools als Google Analytics en Fathom bieden een eenvoudige manier om dit te doen met een extern script.

Maar misschien wilt u geen bibliotheek van derden gebruiken. In dat geval kunt u een database gebruiken om de bezoekers van uw site bij te houden.

Supabase is een open-source Firebase-alternatief waarmee u paginaweergaven in realtime kunt bijhouden.

Bereid uw site voor om paginaweergaven bij te houden

U moet een Next.js-blog hebben om deze zelfstudie te volgen. Als je er nog geen hebt, kan dat maak een op Markdown gebaseerde blog met behulp van react-markdown.

U kunt ook de officiële Next.js-blogstartersjabloon klonen van zijn GitHub opslagplaats.

Supabase is een Firebase-alternatief dat een Postgres-database, authenticatie, instant-API's, Edge-functies, realtime abonnementen en opslag biedt.

U zult het gebruiken om de paginaweergaven voor elk blogbericht op te slaan.

Maak een Supabase-database

Ga naar de Supabase-website en log in of maak een account aan.

Klik op het Supabase-dashboard op Nieuw project en kies een organisatie (Supabase heeft een organisatie aangemaakt onder de gebruikersnaam van uw account).

Vul de projectnaam en het wachtwoord in en klik op Maak een nieuw project aan.

Kopieer op de instellingenpagina onder de API-sectie de project-URL en de openbare en geheime sleutels.

Open de .env.lokaal bestand in het Next.js-project en kopieer deze API-details.

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\N

Navigeer vervolgens naar de SQL-editor en klik op Nieuwe vraag.

Gebruik de standaard SQL-opdracht om een ​​tabel te maken genaamd keer bekeken.

CREËRENTAFEL weergaven (\n ID kaartbigintGEGENEREERDDOORSTANDAARDALSIDENTITEIT PRIMAIRE SLEUTEL,\n slak tekstUNIEKNIETNUL,\n view_count bigintSTANDAARD1NIETNUL,\n bijgewerkt_at tijdstempelSTANDAARDNU() NIETNUL\n);\n

U kunt ook de tabeleditor gebruiken om de weergavetabel te maken:

De tabeleditor bevindt zich in het linkerdeelvenster van het dashboard.

Maak een Supabase Stored Procedure om weergaven bij te werken

Postgres heeft ingebouwde ondersteuning voor SQL-functies die u kunt aanroepen via de Supabase API. Deze functie is verantwoordelijk voor het verhogen van het aantal weergaven in de weergavetabel.

Volg deze instructies om een ​​databasefunctie te maken:

  1. Ga naar het gedeelte SQL-editor in het linkerdeelvenster.
  2. Klik op Nieuwe zoekopdracht.
  3. Voeg deze SQL-query toe om de databasefunctie te maken. 
    CREËRENOFVERVANGENFUNCTIE update_views (pagina_slug TEKST)
    GEEFT TERUG leegte
    TAAL plpgsql
    ALS $$
    BEGINNEN
     INDIEN BESTAAT (SELECTEERVAN keer bekeken WAAR slak=pagina_slak) DAN
    UPDATE keer bekeken
    SET view_count = view_count + 1,
     bijgewerkt_om = nu()
     WHERE slak = pagina_slak;
    ANDERS
    INVOEGENnaar binnen uitzicht (slak) WAARDEN (pagina_slak);
    EINDEALS;
    EINDE;
    $$;
  4. Klik op Uitvoeren of Cmd + Enter (Ctrl + Enter) om de query uit te voeren.

Deze SQL-functie heet update_views en accepteert een tekstargument. Het controleert eerst of dat blogbericht al in de tabel staat en als dat het geval is, wordt het aantal weergaven met 1 verhoogd. Als dit niet het geval is, wordt er een nieuw item gemaakt voor het bericht waarvan het aantal weergaven standaard op 1 staat.

Supabase Client instellen in Next.js

Supabase installeren en configureren

Installeer het pakket @supabase/supabase-js via npm om verbinding te maken met de database vanuit Next.js.

npm installeren @supabase/supabase-js\n

Maak vervolgens een /lib/supabase.ts bestand in de hoofdmap van uw project en initialiseer de Supabase-client.

importeren { createClient } van'@supabase/supabase-js';\nconst supabaseUrl: string = proces.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: tekenreeks = proces.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase };\n

Onthoud dat u de API-referenties in .env.local hebt opgeslagen toen u de database maakte.

Paginaweergaven bijwerken

Maak een API-route die de paginaweergaven van Supabase ophaalt en het aantal weergaven bijwerkt telkens wanneer een gebruiker een pagina bezoekt.

Deze route maak je aan in de /api map in een bestand met de naam views/[slak].ts. Het gebruik van haakjes rond de bestandsnaam creëert een dynamische route. Overeenkomende parameters worden verzonden als een queryparameter met de naam slug.

importeren { supabase } van"../../../lib/supabase/admin";\nimporteer { NextApiRequest, NextApiResponse } van"volgende";\nconst handler = asynchroon (req: NextApiRequest, res: NextApiResponse) => {\n als (vereist methode "NA") {\N wachten supabase.rpc("update_views", {\n page_slug: req.query.slug,\n});\n opbrengst res.status(200.json({\n bericht: "Succes",\n });\n }\n als (vereist methode "KRIJGEN") {\N const { gegevens } = wachten supabase\n .from("keer bekeken")\n .selecteer("kijkcijfers")\n .filter("naaktslak", "eq", req.query.slug);\n als (gegevens) {\n opbrengst res.status(200.json({\n totaal: gegevens[0]?.view_count || 0,\n });\n }\n }\n opbrengst res.status(400.json({\n bericht: "Ongeldig verzoek",\n });\n};\nexporteren standaard begeleider;\n

De eerste if-opdracht controleert of het verzoek een POST-verzoek is. Als dat zo is, roept het de update_views SQL-functie aan en geeft het de slug door als argument. De functie verhoogt het aantal weergaven of maakt een nieuw item voor dit bericht.

De tweede if-opdracht controleert of het verzoek een GET-methode is. Als dat zo is, haalt het het totale aantal weergaven voor dat bericht op en retourneert het.

Als het verzoek geen POST- of GET-verzoek is, retourneert de handlerfunctie een bericht "Ongeldig verzoek".

Paginaweergaven toevoegen aan de blog

Om paginaweergaven bij te houden, moet u elke keer dat een gebruiker naar een pagina navigeert op de API-route klikken.

Begin met het installeren van het swr-pakket. U zult het gebruiken om de gegevens van de API op te halen.

npm installeren swr\n

swr staat voor muf terwijl revalideren. Hiermee kunt u de weergaven aan de gebruiker weergeven terwijl u op de achtergrond actuele gegevens ophaalt.

Maak vervolgens een nieuwe component met de naam viewsCounter.tsx en voeg het volgende toe:

importeren gebruik SWR van"swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = asynchroon (invoer: RequestInfo) => {\n const res: Reactie = wachten ophalen (invoeren);\n opbrengstwachten res.json();\n};\nconst ViewsCounter = ({slak}: Rekwisieten) => {\nconst { gegevens } = gebruikSWR(`/api/views/${slak}`, ophalen);\nretourneren (\n {`${\n (gegevens?.totaal)? gegevens.totaal :"0"\N } uitzicht`}</span>\n);\n};\nexporteer standaard ViewsCounter;\n

Deze component geeft het totale aantal weergaven voor elke blog weer. Het accepteert de slug van een bericht als een prop en gebruikt die waarde om het verzoek naar de API te sturen. Als de API weergaven retourneert, geeft deze die waarde weer, anders geeft deze "0 weergaven" weer.

Om weergaven te registreren, voegt u de volgende code toe aan de component die elk bericht weergeeft.

importeren { gebruikEffect } van"Reageer";\nimporteer ViewsCounter van"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({slak}: Rekwisieten) => {\n gebruikEffect(() => {\n halen(`/api/views/${slak}`, {\n methode: 'NA'\n });\n }, [slak]);\nterug (\n 
\N \N // bloginhoud\n 

\n)\n}\nexporteer standaard Post\n

Controleer de Supabase-database om te zien hoe het aantal weergaven wordt bijgewerkt. Het zou elke keer dat u een bericht bezoekt met 1 moeten toenemen.

Meer dan paginaweergaven bijhouden

Paginaweergaven laten u weten hoeveel gebruikers specifieke pagina's op uw site bezoeken. U kunt zien welke pagina's goed presteren en welke niet.

Om nog verder te gaan, houdt u de verwijzer van uw bezoeker bij om te zien waar het verkeer vandaan komt of maakt u een dashboard om de gegevens beter te visualiseren. Onthoud dat u dingen altijd kunt vereenvoudigen door een analysetool zoals Google Analytics te gebruiken.