Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Sayfa görüntülemeleri, web performansını izlemek için önemli bir ölçümdür. Google Analytics ve Fathom gibi yazılım araçları, bunu harici bir komut dosyasıyla yapmanın basit bir yolunu sunar.

Ancak üçüncü taraf bir kitaplık kullanmak istemiyor olabilirsiniz. Böyle bir durumda, sitenizin ziyaretçilerini takip etmek için bir veri tabanı kullanabilirsiniz.

Supabase, sayfa görüntülemelerini gerçek zamanlı olarak takip etmenize yardımcı olabilecek açık kaynaklı bir Firebase alternatifidir.

Sayfa Görüntülemelerini İzlemeye Başlamak İçin Sitenizi Hazırlayın

Bu öğreticiyi takip etmek için bir Next.js blogunuzun olması gerekir. Zaten sahip değilseniz, yapabilirsiniz tepki-markdown kullanarak Markdown tabanlı bir blog oluşturun.

Resmi Next.js blog başlangıç ​​şablonunu da kopyalayabilirsiniz. GitHub depo.

Supabase, Postgres veritabanı, kimlik doğrulama, anlık API'ler, Edge İşlevleri, gerçek zamanlı abonelikler ve depolama sağlayan bir Firebase alternatifidir.

instagram viewer

Her blog gönderisi için sayfa görüntülemelerini depolamak için kullanacaksınız.

Bir Supabase Veritabanı Oluşturun

Gitmek supabase web sitesi ve oturum açın veya bir hesap için kaydolun.

Supabase kontrol panelinde, üzerine tıklayın Yeni proje ve bir organizasyon seçin (Supabase, hesabınızın kullanıcı adı altında bir organizasyon oluşturmuş olacaktır).

Proje adını ve şifreyi girin ve ardından tıklayın Yeni proje oluştur.

API bölümünün altındaki ayarlar sayfasında, proje URL'sini ve genel ve gizli anahtarları kopyalayın.

Aç .env.yerel Next.js projesinde dosya oluşturun ve bu API ayrıntılarını kopyalayın.

NEXT_PUBLIC_SUPABASE_URL=""\nNEXT_PUBLIC_SUPABASE_KEY=""\nSUPABASE_SERVICE_KEY=""\N

Ardından, SQL editörüne gidin ve üzerine tıklayın. Yeni sorgu.

Kullan tablo oluşturmak için standart SQL komutu isminde Görüntüleme.

YARATMAKMASA görünümler (\n İDbüyükOLUŞTURULDUİLEVARSAYILANGİBİKİMLİK ÖNCELİK ANAHTAR,\n sümüklü böcek metinEŞSİZOLUMSUZHÜKÜMSÜZ,\n görüntüleme_sayısı büyükVARSAYILAN1OLUMSUZHÜKÜMSÜZ,\n update_at zaman damgasıVARSAYILANŞİMDİ() OLUMSUZHÜKÜMSÜZ\n);\n

Alternatif olarak, görünüm tablosunu oluşturmak için tablo düzenleyiciyi kullanabilirsiniz:

Tablo düzenleyici, panonun sol bölmesindedir.

Görünümleri Güncellemek için Supabase Saklı Prosedürü Oluşturma

Postgres, Supabase API aracılığıyla çağırabileceğiniz yerleşik SQL işlevleri desteğine sahiptir. Bu işlev, görüntüleme tablosundaki görüntüleme sayısını artırmaktan sorumlu olacaktır.

Bir veritabanı işlevi oluşturmak için şu talimatları izleyin:

  1. Sol bölmedeki SQL düzenleyici bölümüne gidin.
  2. Yeni Sorgu'ya tıklayın.
  3. Veritabanı işlevini oluşturmak için bu SQL sorgusunu ekleyin. 
    YARATMAKVEYAYER DEĞİŞTİRMEKİŞLEV update_views (page_slug METİN)
    İADELER geçersiz
    DİL plpgsql
    GİBİ $$
    BAŞLAMAK
     VARSA (SEÇMEİTİBAREN Görüntüleme NEREDE slug=page_slug) DAHA SONRA
    GÜNCELLEME Görüntüleme
    AYARLAMAK görüntüleme_sayısı = görüntüleme_sayısı + 1,
     güncellendi_at = şimdi()
     NEREDE bilgi = sayfa_slug;
    BAŞKA
    SOKMAKiçine görünümler (bilgi) DEĞERLER (page_slug);
    SONEĞER;
    SON;
    $$;
  4. Sorguyu yürütmek için Çalıştır'a veya Cmd + Enter'a (Ctrl + Enter) tıklayın.

Bu SQL işlevine update_views adı verilir ve bir metin bağımsız değişkenini kabul eder. Önce o blog gönderisinin tabloda var olup olmadığını kontrol eder ve varsa görüntüleme sayısını 1 artırır. Aksi takdirde, görüntüleme sayısı varsayılan olarak 1 olan gönderi için yeni bir giriş oluşturur.

Next.js'de Supabase İstemcisini Kurun

Supabase'i Kurun ve Yapılandırın

Next.js'den veritabanına bağlanmak için @supabase/supabase-js paketini npm aracılığıyla kurun.

npm kurulum @supabase/supabase-js\n

Ardından, bir /lib/supabase.ts projenizin kök dizininde dosya oluşturun ve Supabase istemcisini başlatın.

içe aktarmak {istemci oluştur} itibaren"@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

Veritabanını oluştururken API kimlik bilgilerini .env.local dosyasına kaydettiğinizi unutmayın.

Sayfa Görünümlerini Güncelle

Supabase'den sayfa görüntülemelerini alan ve bir kullanıcı bir sayfayı her ziyaret ettiğinde görüntüleme sayısını güncelleyen bir API rotası oluşturun.

Bu rotayı /api adlı bir dosyanın içindeki klasör görünümler/[slug].ts. Dosya adının etrafında parantez kullanmak, dinamik bir yol oluşturur. Eşleşen parametreler, bilgi adı verilen bir sorgu parametresi olarak gönderilecektir.

içe aktarmak { alt taban } itibaren"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } itibaren"Sonraki";\nconst işleyici = zaman uyumsuz (istek: NextApiRequest, res: NextApiResponse) => {\n eğer (gerekli yöntem "POSTALAMAK") {\N beklemek supabase.rpc("güncelleme_görünümleri", {\n page_slug: req.query.slug,\n });\n geri dönmek res.status(200).json({\n mesaj: "Başarı",\n });\n }\n eğer (gerekli yöntem "ELDE ETMEK") {\N sabit { veri } = beklemek supabase\n .from("Görüntüleme")\n .seç("görüntüleme_sayısı")\n .filtre("sümüklü böcek", "eş", req.query.slug);\n eğer (veri) {\n geri dönmek res.status(200).json({\n toplam: veri[0]?.view_count || 0,\n });\n }\n }\n geri dönmek res.status(400).json({\n mesaj: "Geçersiz istek",\n });\n};\sonraki dışa aktarma varsayılan işleyici;\n

İlk if ifadesi, isteğin bir POST isteği olup olmadığını kontrol eder. Öyleyse, update_views SQL işlevini çağırır ve bilgi parçasını bir bağımsız değişken olarak iletir. İşlev, görüntüleme sayısını artıracak veya bu gönderi için yeni bir giriş oluşturacaktır.

İkinci if ifadesi, isteğin bir GET yöntemi olup olmadığını kontrol eder. Öyleyse, o gönderi için toplam görüntüleme sayısını getirir ve döndürür.

İstek bir POST veya GET isteği değilse işleyici işlevi "Geçersiz istek" mesajı döndürür.

Blog'a Sayfa Görünümleri Ekleme

Sayfa görüntülemelerini izlemek için, bir kullanıcı bir sayfaya her gittiğinde API yoluna gitmeniz gerekir.

Swr paketini yükleyerek başlayın. Verileri API'den almak için kullanacaksınız.

npm düzenlemek swr\n

swr, yeniden doğrularken bayat anlamına gelir. Arka planda güncel verileri getirirken görünümleri kullanıcıya göstermenizi sağlar.

Ardından, viewsCounter.tsx adlı yeni bir bileşen oluşturun ve aşağıdakini ekleyin:

içe aktarmak kullanımSWR itibaren"swr";\interface Props {\n bilgi: string;\n}\nconst fetcher = zaman uyumsuz (giriş: İstekBilgisi) => {\n sabit yanıt: Yanıt = beklemek getir (giriş);\n geri dönmekbeklemek res.json();\n};\nconst ViewsCounter = ({ sümüklü böcek }: Aksesuarlar) => {\nconst {veri} = SWR kullan(`/api/görünümler/${slug}`, alıcı);\ndönüş (\n {`${\n (veri?.toplam)? veri.toplam :"0"\N } görünümler`}</span>\n );\n};\nvarsayılan ViewsCounter'ı aktar;\n

Bu bileşen, her blog için toplam görüntüleme sayısını oluşturur. Bir gönderi bilgisini destek olarak kabul eder ve bu değeri API'ye istekte bulunmak için kullanır. API görünümleri döndürürse, bu değeri görüntüler, aksi takdirde "0 görüntüleme" görüntüler.

Görünümleri kaydetmek için, her gönderiyi işleyen bileşene aşağıdaki kodu ekleyin.

içe aktarmak { useEffect } itibaren"tepki";\nGörüntülemeSayacı'nı içe aktar itibaren"../../bileşenler/görünümSayacı";\interface Props {\n bilgi: string;\n}\nconst Post = ({ sümüklü böcek }: Sahne) => {\n useEffect(() => {\n getir(`/api/görünümler/${slug}`, {\n yöntem: 'POSTALAMAK'\n });\n }, [slug]);\ndönüş (\n 
\N \N // blog içeriği\n 

\n)\n}\nevarsayılan Gönderiyi dışa aktar\n

Görüntüleme sayısının nasıl güncellendiğini görmek için Supabase veritabanını kontrol edin. Bir gönderiyi her ziyaret ettiğinizde 1 artmalıdır.

Birden Fazla Sayfa Görüntülemesini İzleme

Sayfa görünümleri, sitenizdeki belirli sayfaları kaç kullanıcının ziyaret ettiğini bilmenizi sağlar. Hangi sayfaların iyi performans gösterdiğini ve hangilerinin olmadığını görebilirsiniz.

Daha da ileri gitmek için trafiğin nereden geldiğini görmek için ziyaretçinizin yönlendirenini takip edin veya verileri daha iyi görselleştirmeye yardımcı olacak bir pano oluşturun. Google Analytics gibi bir analiz aracı kullanarak işleri her zaman basitleştirebileceğinizi unutmayın.