Hur man håller reda på sidvisningar på din blogg med Supabase

Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Sidvisningar är ett viktigt mått för att spåra webbprestanda. Programvaruverktyg som Google Analytics och Fathom ger ett enkelt sätt att göra detta med ett externt skript.

Men du kanske inte vill använda ett tredjepartsbibliotek. I ett sådant fall kan du använda en databas för att hålla reda på webbplatsens besökare.

Supabase är ett Firebase-alternativ med öppen källkod som kan hjälpa dig att hålla reda på sidvisningar i realtid.

Förbered din webbplats för att börja spåra sidvisningar

Du måste ha en Next.js-blogg för att följa med den här handledningen. Om du inte redan har en så kan du skapa en Markdown-baserad blogg med hjälp av react-markdown .

Du kan också klona den officiella Next.js bloggstartmallen från dess GitHub förvaret.

Supabase är ett Firebase-alternativ som tillhandahåller en Postgres-databas, autentisering, omedelbara API:er, Edge-funktioner, realtidsprenumerationer och lagring.

Du kommer att använda den för att lagra sidvisningarna för varje blogginlägg.

Skapa en Supabase-databas

Gå till Supabase webbplats och logga in eller registrera dig för ett konto.

Klicka på på Supabase-instrumentpanelen Nytt projekt och välj en organisation (Supabase kommer att ha skapat en organisation under användarnamnet för ditt konto).

Fyll i projektnamnet och lösenordet och klicka sedan Skapa nytt projekt.

Skärmdump av projektdetaljer på Supabase

På inställningssidan under API-avsnittet kopierar du projektets URL och de offentliga och hemliga nycklarna.

Skärmdump som visar Supabase-projektets API-nycklar

Öppna .env.local fil i Next.js-projektet och kopiera dessa API-detaljer.

 NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\n

Navigera sedan till SQL-redigeraren och klicka på Ny fråga .

Använd standard SQL-kommando för att skapa en tabell kallad vyer .

 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

Alternativt kan du använda tabellredigeraren för att skapa vytabellen:

Tabellredigeraren finns till vänster på instrumentpanelen.

hårdvaruacceleration krom på eller av

Skapa en Supabase lagrad procedur för att uppdatera vyer

Postgres har inbyggt stöd för SQL-funktioner som du kan anropa via Supabase API. Denna funktion kommer att ansvara för att öka antalet visningar i visningstabellen.

För att skapa en databasfunktion, följ dessa instruktioner:

Gå till SQL-redigeraren i den vänstra rutan.
Klicka på Ny fråga.

Lägg till den här SQL-frågan för att skapa databasfunktionen.

 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; 
$$;

Klicka på Kör eller Cmd + Enter (Ctrl + Enter) för att köra frågan.

Denna SQL-funktion kallas update_views och accepterar ett textargument. Den kontrollerar först om det blogginlägget redan finns i tabellen och om det gör det ökar det antalet visningar med 1. Om det inte gör det skapas en ny post för inlägget vars antal visningar som standard är 1.

Konfigurera Supabase-klienten i Next.js

Installera och konfigurera Supabase

Installera @supabase/supabase-js-paketet via npm för att ansluta till databasen från Next.js.

 npm install @supabase/supabase-js\n

Skapa sedan en /lib/supabase.ts fil i roten av ditt projekt och initiera Supabase-klienten.

 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

Kom ihåg att du sparade API-uppgifterna i .env.local när du skapade databasen.

Uppdatera sidvisningar

Skapa en API-rutt som hämtar sidvisningarna från Supabase och uppdaterar visningsantalet varje gång en användare besöker en sida.

Du kommer att skapa den här rutten i /api mapp i en fil som heter visningar/[snigel].ts . Att använda parenteser runt filnamnet skapar en dynamisk rutt. Matchade parametrar kommer att skickas som en frågeparameter som kallas 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

Den första if-satsen kontrollerar om begäran är en POST-begäran. Om det är det, anropar den update_views SQL-funktionen och skickar in slugsen som ett argument. Funktionen kommer att öka antalet visningar eller skapa en ny post för detta inlägg.

Den andra if-satsen kontrollerar om begäran är en GET-metod. Om det är det, hämtar den det totala antalet visningar för det inlägget och returnerar det.

Om begäran inte är en POST- eller GET-begäran, returnerar hanterarfunktionen ett 'Invalid request'-meddelande.

Lägg till sidvisningar i bloggen

För att spåra sidvisningar måste du gå till API-rutten varje gång en användare navigerar till en sida.

Börja med att installera swr-paketet. Du kommer att använda den för att hämta data från API:t.

 npm install swr\n

swr står för stale while revalidate. Det låter dig visa vyerna för användaren samtidigt som du hämtar uppdaterad data i bakgrunden.

Skapa sedan en ny komponent som heter viewsCounter.tsx och lägg till följande:

 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

Den här komponenten återger det totala antalet visningar för varje blogg. Den accepterar en posts slug som en rekvisita och använder det värdet för att göra begäran till API:t. Om API:et returnerar vyer visar det det värdet annars visar det '0 vyer'.

För att registrera visningar, lägg till följande kod till komponenten som återger varje inlägg.

 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

Kontrollera Supabase-databasen för att se hur visningsantalet uppdateras. Den bör öka med 1 varje gång du besöker ett inlägg.

Spåra fler än sidvisningar

Sidvisningar låter dig veta hur många användare som besöker specifika sidor på din webbplats. Du kan se vilka sidor som fungerar bra och vilka som inte gör det.

För att gå ännu längre, håll koll på din besökares hänvisare för att se var trafiken kommer ifrån eller skapa en instrumentpanel för att visualisera data bättre. Kom ihåg att du alltid kan förenkla saker genom att använda ett analysverktyg som Google Analytics.