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.

instagram viewer

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.

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

Ö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.

SKAPATABELL vyer (\n idbigintGENERERADFÖRBISTANDARDSOMIDENTITET PRIMÄR NYCKEL,\n snigel textUNIKINTENULL,\n view_count bigintSTANDARD1INTENULL,\n updated_at tidsstämpelSTANDARDNU() INTENULL\n);\n

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

Tabellredigeraren finns till vänster på instrumentpanelen.

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:

  1. Gå till SQL-redigeraren i den vänstra rutan.
  2. Klicka på Ny fråga.
  3. Lägg till den här SQL-frågan för att skapa databasfunktionen. 
    SKAPAELLERBYTA UTFUNGERA update_views (page_slug TEXT)
    RETURER tomhet
    SPRÅK plpgsql
    SOM $$
    BÖRJA
     OM FINNS (VÄLJFRÅN vyer VAR slug=page_slug) SEDAN
    UPPDATERING vyer
    UPPSÄTTNING view_count = view_count + 1,
     updated_at = now()
     WHERE slug = page_slug;
    ANNAN
    FÖRA INin i visningar (snigel) VÄRDEN (page_slug);
    SLUTETOM;
    SLUTET;
    $$;
  4. 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 den inte gör det skapas en ny post för inlägget vars visningsantal är som standard 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 installera @supabase/supabase-js\n

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

importera { createClient } från'@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);\nexportera { 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.

importera { supabase } från"../../../lib/supabase/admin";\nimportera { NextApiRequest, NextApiResponse } från"Nästa";\nconst-hanterare = asynkron (req: NextApiRequest, res: NextApiResponse) => {\n om (req.metod "POSTA") {\n vänta supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n lämna tillbaka res.status(200).json({\n meddelande: "Framgång",\n });\n }\n om (req.metod "SKAFFA SIG") {\n konst { data } = vänta supabase\n .från("vyer")\n .select("antal visningar")\n .filter("snigel", "eq", req.query.slug);\n om (data) {\n lämna tillbaka res.status(200).json({\n totalt: data[0]?.visningsantal || 0,\n });\n }\n }\n lämna tillbaka res.status(400).json({\n meddelande: "Ogiltig Förfrågan",\n });\n};\nexportera standard hanterare;\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 Installera 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:

importera använd SWR från"swr";\ngränssnittsrekvisita {\n snigel: sträng;\n}\nkonst hämtar = asynkron (ingång: RequestInfo) => {\n konst res: Svar = vänta hämta (indata);\n lämna tillbakavänta res.json();\n};\nconst ViewsCounter = ({ snigel }: rekvisita) => {\nconst { data } = användSWR(`/api/views/${slug}`, hämtar);\nretur (\n {`${\n (data?.total)? data.total :"0"\n } vyer`}</span>\n );\n};\nexportera standard 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.

importera { useEffect } från"reagera";\nimportera ViewsCounter från"../../components/viewsCounter";\ngränssnittsrekvisita {\n slug: sträng;\n}\nkonst Post = ({ snigel }: rekvisita) => {\n useEffect(() => {\n hämta(`/api/views/${slug}`, {\n metod: 'POSTA'\n });\n }, [snigel]);\nretur (\n 
\n \n // blogginnehåll\n 

\n)\n}\nexportera standardinlägg\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.