Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Az oldalmegtekintések fontos mérőszámok az internetes teljesítmény nyomon követéséhez. Az olyan szoftvereszközök, mint a Google Analytics és a Fathom, egyszerű módot kínálnak erre egy külső szkript segítségével.

De lehet, hogy nem szeretne harmadik féltől származó könyvtárat használni. Ilyen esetben egy adatbázis segítségével nyomon követheti webhelye látogatóit.

A Supabase egy nyílt forráskódú Firebase alternatíva, amely segítségével valós időben nyomon követheti az oldalmegtekintéseket.

Készítse fel webhelyét az oldalmegtekintések nyomon követésére

Szüksége van egy Next.js blogra, hogy kövesse ezt az oktatóanyagot. Ha még nincs, akkor megteheti Markdown alapú blog létrehozása a react-markdown használatával.

A hivatalos Next.js blogindító sablont is klónozhatja belőle GitHub adattár.

A Supabase egy Firebase alternatíva, amely Postgres adatbázist, hitelesítést, azonnali API-kat, Edge-függvényeket, valós idejű előfizetéseket és tárhelyet biztosít.

instagram viewer

Ezt fogja használni az egyes blogbejegyzések oldalmegtekintéseinek tárolására.

Hozzon létre egy Supabase adatbázist

Menj a Supabase weboldal és jelentkezzen be, vagy regisztráljon egy fiókot.

A Supabase irányítópulton kattintson a gombra Új projekt és válasszon egy szervezetet (a Supabase létrehoz egy szervezetet az Ön fiókja felhasználónevével).

Adja meg a projekt nevét és jelszavát, majd kattintson a gombra Új projekt létrehozása.

Az API szakasz alatti beállítások oldalon másolja ki a projekt URL-címét, valamint a nyilvános és titkos kulcsokat.

Nyissa meg a .env.local fájlt a Next.js projektben, és másolja át ezeket az API-adatokat.

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

Ezután lépjen az SQL-szerkesztőbe, és kattintson a gombra Új lekérdezés.

Használja a szabványos SQL parancs a táblázat létrehozásához hívott nézetek.

TEREMTASZTAL nézetek (\n idbigintGENERÁLTÁLTALALAPÉRTELMEZETTMINTIDENTITÁS ELSŐDLEGES KULCS,\n csiga szövegEGYEDINEMNULLA,\n view_count bigintALAPÉRTELMEZETT1NEMNULLA,\n frissítve_at időbélyegALAPÉRTELMEZETTMOST() NEMNULLA\n);\n

Alternatív megoldásként használhatja a táblázatszerkesztőt a nézettáblázat létrehozásához:

A táblázatszerkesztő az irányítópult bal oldali ablaktáblájában található.

Hozzon létre egy Supabase tárolt eljárást a nézetek frissítéséhez

A Postgres beépített támogatással rendelkezik az SQL függvényekhez, amelyeket a Supabase API-n keresztül hívhat meg. Ez a függvény lesz felelős a megtekintések számának növeléséért a nézettségi táblázatban.

Adatbázisfüggvény létrehozásához kövesse az alábbi utasításokat:

  1. Lépjen az SQL-szerkesztő részre a bal oldali ablaktáblában.
  2. Kattintson az Új lekérdezés gombra.
  3. Adja hozzá ezt az SQL-lekérdezést az adatbázis-függvény létrehozásához. 
    TEREMTVAGYCSEREFUNKCIÓ update_views (page_slug SZÖVEG)
    VISSZATÉRÉSEK üres
    NYELV plpgsql
    MINT $$
    KEZDŐDIK
     HA LÉTEZIK (KIVÁLASZTÁSTÓL TŐL nézetek AHOL slug=page_slug) AKKOR
    FRISSÍTÉS nézetek
    KÉSZLET view_count = megtekintésszám + 1,
     frissítve_at = most()
     WHERE slug = page_slug;
    MÁS
    BESZÁLLÍTÁS-ba nézetek (csiga) ÉRTÉKEK (oldal_slug);
    VÉGEHA;
    VÉGE;
    $$;
  4. Kattintson a Futtatás vagy a Cmd + Enter (Ctrl + Enter) billentyűkre a lekérdezés végrehajtásához.

Ezt az SQL-függvényt update_views-nak hívják, és szöveges argumentumot fogad el. Először ellenőrzi, hogy az adott blogbejegyzés létezik-e már a táblázatban, és ha igen, akkor 1-gyel növeli a megtekintések számát. Ha nem, akkor új bejegyzést hoz létre a bejegyzéshez, amelynek megtekintéseinek száma alapértelmezés szerint 1.

Állítsa be a Supabase klienst a Next.js-ben

Telepítse és konfigurálja a Supabase-t

Telepítse a @supabase/supabase-js csomagot npm-en keresztül, hogy csatlakozzon az adatbázishoz a Next.js-ből.

npm telepítés @supabase/supabase-js\n

Ezután hozzon létre a /lib/supabase.ts fájlt a projekt gyökérkönyvtárába, és inicializálja a Supabase klienst.

import {Client létrehozása } tól től"@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

Ne feledje, hogy az API hitelesítő adatait az .env.local fájlba mentette az adatbázis létrehozásakor.

Oldalnézetek frissítése

Hozzon létre egy API-útvonalat, amely lekéri az oldalmegtekintéseket a Supabase-ről, és minden alkalommal frissíti a megtekintések számát, amikor egy felhasználó felkeres egy oldalt.

Ezt az útvonalat a következő helyen fogja létrehozni /api nevű fájlban található mappa nézetek/[csiga].ts. Ha a fájlnév körül zárójeleket használ, dinamikus útvonal jön létre. Az egyező paraméterek slug nevű lekérdezési paraméterként kerülnek elküldésre.

import { supabase } tól től"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } tól től"következő";\nconst kezelő = async (kérés: NextApiRequest, res: NextApiResponse) => {\n ha (req.method "POST") {\n várja supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n Visszatérés res.status(200.json({\n üzenet: "Siker",\n });\n }\n ha (req.method "KAP") {\n const { adat } = várja supabase\n .from("nézetek")\n .select("view_count")\n .filter("meztelen csiga", "egyenl", req.query.slug);\n ha (adatok) {\n Visszatérés res.status(200).json({\n összesen: adat[0]?.view_count || 0,\n });\n }\n }\n Visszatérés res.status(400.json({\n üzenet: "Érvénytelen kérelem",\n });\n};\nexportálás alapértelmezett kezelő;\n

Az első if utasítás ellenőrzi, hogy a kérés POST-e. Ha igen, akkor meghívja az update_views SQL függvényt, és argumentumként átadja a slug-ot. A funkció növeli a megtekintések számát, vagy új bejegyzést hoz létre ehhez a bejegyzéshez.

A második if utasítás ellenőrzi, hogy a kérés GET metódus-e. Ha igen, akkor lekéri az adott bejegyzés teljes megtekintési számát, és visszaadja azt.

Ha a kérés nem POST vagy GET kérés, a kezelő függvény „Érvénytelen kérés” üzenetet ad vissza.

Oldalmegtekintések hozzáadása a bloghoz

Az oldalmegtekintések nyomon követéséhez minden alkalommal meg kell találnia az API útvonalat, amikor a felhasználó egy oldalra navigál.

Kezdje az swr csomag telepítésével. Ezt fogja használni az adatok lekérésére az API-ból.

npm telepítés swr\n

Az swr a stale while revalidate rövidítése. Lehetővé teszi a nézetek megjelenítését a felhasználó számára, miközben a háttérben lekéri a naprakész adatokat.

Ezután hozzon létre egy viewCounter.tsx nevű új összetevőt, és adja hozzá a következőket:

import használd az SWR-t tól től"swr";\ninterfész kellékek {\n slug: string;\n}\nconst fetcher = async (bemenet: RequestInfo) => {\n const res: Válasz = várja letöltés (bemenet);\n Visszatérésvárja res.json();\n};\nconst ViewsCounter = ({ slug }: Kellékek) => {\nconst { data } = useSWR(`/api/views/${slug}`, fetcher);\nreturn (\n {`${\n (adat?.összesen)? data.total :"0"\n } nézetek'}</span>\n );\n};\nexportálja az alapértelmezett ViewsCounter-t;\n

Ez az összetevő megjeleníti az egyes blogok teljes megtekintését. Elfogadja egy bejegyzés csigáját kellékként, és ezt az értéket használja az API-hoz intézett kéréshez. Ha az API nézeteket ad vissza, akkor ezt az értéket jeleníti meg, ellenkező esetben „0 nézetet” jelenít meg.

A nézetek regisztrálásához adja hozzá a következő kódot az egyes bejegyzéseket megjelenítő összetevőhöz.

import { useEffect } tól től"reagál";\nimport ViewsCounter tól től"../../components/viewsCounter";\ninterfész kellékek {\n slug: string;\n}\nconst Bejegyzés = ({ slug }: Kellékek) => {\n useEffect(() => {\n fetch(`/api/views/${slug}`, {\n módszer: 'POST'\n });\n }, [slug]);\nreturn (\n 
\n \n // blog tartalma\n 

\n)\n}\nexportálja az alapértelmezett bejegyzést\n

Ellenőrizze a Supabase adatbázist, hogy megtudja, hogyan frissül a megtekintések száma. Minden alkalommal, amikor meglátogat egy bejegyzést, 1-gyel kell növekednie.

Több mint oldalmegtekintések követése

Az oldalmegtekintések azt jelzik, hogy hány felhasználó keresi fel webhelyének bizonyos oldalait. Láthatja, hogy mely oldalak teljesítenek jól és melyek nem.

Ha még tovább szeretne lépni, kövesse nyomon a látogató hivatkozóját, hogy lássa, honnan érkezik a forgalom, vagy hozzon létre egy irányítópultot az adatok jobb megjelenítéséhez. Ne feledje, hogy mindig leegyszerűsítheti a dolgokat egy elemző eszköz, például a Google Analytics használatával.