Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Sivun katselukerrat ovat tärkeä mittari verkon tehokkuuden seurannassa. Ohjelmistotyökalut, kuten Google Analytics ja Fathom, tarjoavat yksinkertaisen tavan tehdä tämä ulkoisella komentosarjalla.

Mutta ehkä et halua käyttää kolmannen osapuolen kirjastoa. Siinä tapauksessa voit käyttää tietokantaa seurataksesi sivustosi kävijöitä.

Supabase on avoimen lähdekoodin Firebase-vaihtoehto, jonka avulla voit seurata sivujen näyttökertoja reaaliajassa.

Valmistele sivustosi sivun näyttökertojen seurantaa varten

Sinulla on oltava Next.js-blogi, jotta voit seurata tätä opetusohjelmaa. Jos sinulla ei vielä ole sellaista, voit Luo Markdown-pohjainen blogi käyttämällä react-markdownia.

Voit myös kloonata virallisen Next.js-blogin aloitusmallin siitä GitHub arkisto.

Supabase on Firebase-vaihtoehto, joka tarjoaa Postgres-tietokannan, todennuksen, välittömät sovellusliittymät, Edge-toiminnot, reaaliaikaiset tilaukset ja tallennustilan.

Käytät sitä jokaisen blogikirjoituksen sivun näyttökertojen tallentamiseen.

Luo Supabase-tietokanta

Siirry kohtaan Supabasen verkkosivusto ja kirjaudu sisään tai rekisteröidy tilille.

Napsauta Supabase-hallintapaneelissa Uusi projekti ja valitse organisaatio (Supabase on luonut organisaation tilisi käyttäjätunnuksella).

Täytä projektin nimi ja salasana ja napsauta sitten Luo uusi projekti.

Kopioi sovellusliittymäosion asetussivulla projektin URL-osoite sekä julkiset ja salaiset avaimet.

Avaa .env.local tiedosto Next.js-projektissa ja kopioi nämä API-tiedot.

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

Siirry seuraavaksi SQL-editoriin ja napsauta Uusi kysely.

Käytä tavallinen SQL-komento taulukon luomiseen nimeltään näkymät.

LUODAPÖYTÄ näkymät (\n idbigintLUOTUBYOLETUSKUTENIDENTITY ENSISIJAINEN AVAIN,\n etana tekstiAINUTLAATUINENEITYHJÄ,\n view_count bigintOLETUS1EITYHJÄ,\n päivitetty_at aikaleimaOLETUSNYT() EITYHJÄ\n);\n

Vaihtoehtoisesti voit käyttää taulukkoeditoria luodaksesi näkymätaulukon:

Taulukkoeditori on kojelaudan vasemmassa ruudussa.

Luo Supabase-tallennettu menettely näkymien päivittämistä varten

Postgresissa on sisäänrakennettu tuki SQL-funktioille, joita voit kutsua Supabase API: n kautta. Tämä toiminto on vastuussa katselukertojen määrän lisäämisestä taulukossa.

Luo tietokantatoiminto seuraavasti:

  1. Siirry vasemman ruudun SQL-editori-osioon.
  2. Napsauta Uusi kysely.
  3. Lisää tämä SQL-kysely luodaksesi tietokantafunktion. 
    LUODATAIKORVATATOIMINTO update_views (page_slug TEKSTI)
    PALAUTUKSET mitätön
    KIELI plpgsql
    KUTEN $$
    ALKAA
     JOS ON OLEMASSA (VALITSEFROM näkymät MISSÄ slug=page_slug) SITTEN
    PÄIVITTÄÄ näkymät
    ASETA katselukerrat = katselukerrat + 1,
     päivitetty_at = nyt()
     WHERE etana = page_slug;
    MUU
    LISÄÄsisään näkymät (etana) ARVOT (sivu_slug);
    LOPPUJOS;
    LOPPU;
    $$;
  4. Napsauta Suorita tai Cmd + Enter (Ctrl + Enter) suorittaaksesi kyselyn.

Tätä SQL-funktiota kutsutaan update_views-funktioksi ja se hyväksyy tekstiargumentin. Se tarkistaa ensin, onko kyseinen blogikirjoitus jo taulukossa, ja jos on, se lisää katselukertojaan yhdellä. Jos näin ei ole, se luo viestille uuden merkinnän, jonka näyttökertojen oletusarvo on 1.

Määritä Supabase Client Next.js: ssä

Asenna ja määritä Supabase

Asenna paketti @supabase/supabase-js npm: n kautta muodostaaksesi yhteyden tietokantaan Next.js: stä.

npm asennus @supabase/supabase-js\n

Luo seuraavaksi a /lib/supabase.ts tiedosto projektisi juureen ja alusta Supabase-asiakas.

tuonti { luo asiakas } alkaen'@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

Muista, että tallensit API-tunnistetiedot .env.local-tiedostoon tietokannan luomisen yhteydessä.

Päivitä sivunäkymät

Luo API-reitti, joka hakee sivun katselut Supabasesta ja päivittää katselukertojen määrän aina, kun käyttäjä vierailee sivulla.

Luot tämän reitin osoitteessa /api -nimisen tiedoston sisällä views/[slug].ts. Hakasulkeiden käyttäminen tiedostonimen ympärillä luo dynaamisen reitin. Vastaavat parametrit lähetetään kyselyparametrina nimeltä slug.

tuonti { supabase } alkaen"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } alkaen"Seuraava";\nconst handler = asynk (pyyntö: NextApiRequest, res: NextApiResponse) => {\n jos (tarvittava menetelmä "LÄHETTÄÄ") {\n odottaa supabase.rpc("update_views", {\n page_slug: req.query.slug,\n });\n palata res.status(200.json({\n viesti: "Menestys",\n });\n }\n jos (tarvittava menetelmä "SAADA") {\n konst { tiedot } = odottaa supabase\n .from("näkemykset")\n .select("katselukertojen määrä")\n .filter("etana", "eq", req.query.slug);\n jos (tiedot) {\n palata res.status(200).json({\n yhteensä: data[0]?.view_count || 0,\n });\n }\n }\n palata res.status(400.json({\n viesti: "Virheellinen pyyntö",\n });\n};\nvie oletuksena käsittelijä;\n

Ensimmäinen if-lause tarkistaa, onko pyyntö POST-pyyntö. Jos on, se kutsuu update_views SQL-funktiota ja välittää slugin argumenttina. Toiminto lisää näyttökertojen määrää tai luo uuden merkinnän tähän viestiin.

Toinen if-lause tarkistaa, onko pyyntö GET-menetelmä. Jos on, se hakee kyseisen julkaisun katselukertojen kokonaismäärän ja palauttaa sen.

Jos pyyntö ei ole POST- tai GET-pyyntö, käsittelijäfunktio palauttaa "Virheellinen pyyntö" -sanoman.

Lisää sivun näyttökertoja blogiin

Sivun katselukertojen seuraamiseksi sinun on osuttava API-reitille aina, kun käyttäjä navigoi sivulle.

Aloita asentamalla swr-paketti. Käytät sitä tietojen hakemiseen API: sta.

npm Asentaa swr\n

swr tarkoittaa vanhentunutta, kun validoi uudelleen. Sen avulla voit näyttää näkymät käyttäjälle samalla kun noudat ajantasaista tietoa taustalla.

Luo sitten uusi komponentti nimeltä viewsCounter.tsx ja lisää seuraava:

tuonti käytä SWR: ää alkaen"swr";\nrajapinnan lisäosat {\n slug: string;\n}\nconst fetcher = asynk (syöttö: RequestInfo) => {\n konst res: Response = odottaa hae (syöte);\n palataodottaa res.json();\n};\nconst ViewsCounter = ({ Slug }: Rekvisiitta) => {\nconst { data } = useSWR(`/api/views/${slug}`, hakija);\nreturn (\n {`${\n (data?.yhteensä)? data.total :"0"\n } näkymät`}</span>\n );\n};\nvie oletusnäkymälaskuri;\n

Tämä komponentti näyttää kunkin blogin näyttökertojen kokonaismäärän. Se hyväksyy viestin etanan tukina ja käyttää tätä arvoa pyynnön tekemiseen API: lle. Jos API palauttaa näkymiä, se näyttää kyseisen arvon, muuten se näyttää "0 näkymää".

Rekisteröi näkymiä lisäämällä seuraava koodi komponenttiin, joka hahmontaa jokaisen viestin.

tuonti { useEffect } alkaen"reagoi";\nimport ViewsCounter alkaen"../../components/viewsCounter";\ninterface Props {\n slug: string;\n}\nconst Viesti = ({ Slug }: Rekvisiitta) => {\n useEffect(() => {\n hae(`/api/views/${slug}`, {\n menetelmä: 'LÄHETTÄÄ'\n });\n }, [slug]);\nreturn (\n 
\n \n // blogin sisältö\n 

\n)\n}\nvie oletusviesti\n

Tarkista Supabase-tietokannasta, kuinka katselukerrat päivittyvät. Sen pitäisi kasvaa yhdellä joka kerta, kun vierailet viestissä.

Enemmän kuin sivun katselujen seuranta

Sivun katselukerrat kertovat, kuinka monta käyttäjää vierailee tietyillä sivustosi sivuilla. Näet, mitkä sivut toimivat hyvin ja mitkä eivät.

Jos haluat mennä vielä pidemmälle, seuraa vierailijasi viittausta nähdäksesi, mistä liikenne tulee, tai luo kojelauta, joka auttaa visualisoimaan tiedot paremmin. Muista, että voit aina yksinkertaistaa asioita käyttämällä analytiikkatyökalua, kuten Google Analyticsia.