Hoe paginaweergaven op uw blog bij te houden met Supabase

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.

Screenshot van projectdetails op Supabase

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

Screenshot met de API-sleutels van het Supabase-project

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 .

 CREATE TABLE views (\n id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,\n slug text UNIQUE NOT NULL,\n view_count bigint DEFAULT 1 NOT NULL,\n updated_at timestamp DEFAULT NOW() NOT NULL\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.

hoe apps te downloaden op Samsung Smart TV 2016

Volg deze instructies om een databasefunctie te maken:

Ga naar het gedeelte SQL-editor in het linkerdeelvenster.
Klik op Nieuwe zoekopdracht.

Voeg deze SQL-query toe om de databasefunctie te maken.

 CREATE OR REPLACE FUNCTION update_views(page_slug TEXT) 
RETURNS void 
LANGUAGE plpgsql 
AS $$ 
BEGIN 
    IF EXISTS (SELECT FROM views WHERE slug=page_slug) THEN 
        UPDATE views 
        SET view_count = view_count + 1, 
            updated_at = now() 
        WHERE slug = page_slug; 
    ELSE 
        INSERT into views(slug) VALUES (page_slug); 
    END IF; 
END; 
$$;

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, maakt het een nieuw item aan 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 install @supabase/supabase-js\n

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

 import { createClient } from '@supabase/supabase-js';\nconst supabaseUrl: string = process.env.NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: string = process.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.

 import { supabase } from "../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } from "next";\nconst handler = async (req: NextApiRequest, res: NextApiResponse) => {\n if (req.method === "POST") {\n await supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n return res.status(200).json({\n message: "Success",\n });\n }\n if (req.method === "GET") {\n const { data } = await supabase\n .from("views")\n .select("view_count")\n .filter("slug", "eq", req.query.slug);\n if (data) {\n return res.status(200).json({\n total: data[0]?.view_count || 0,\n });\n }\n }\n return res.status(400).json({\n message: "Invalid request",\n });\n};\nexport default handler;\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 install 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.

iemand heeft een stroomverzoek gestuurd om het stuurprogramma weer te geven

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

 import useSWR from "swr";\ninterface Props {\n slug: string;\n}\nconst fetcher = async (input: RequestInfo) => {\n const res: Response = await fetch(input);\n return await res.json();\n};\nconst ViewsCounter = ({ slug }: Props) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n <span>{`${\n (data?.total) ? data.total :"0"\n } views`}</span>\n );\n};\nexport default 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.

 import { useEffect } from "react";\nimport ViewsCounter from "../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Post = ({ slug }:Props) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n method: 'POST'\n });\n }, [slug]);\nreturn (\n <div>\n <ViewsCounter slug={slug}/>\n // blog content\n </div>\n)\n}\nexport default 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.