Cara Menjejaki Paparan Halaman di Blog Anda Menggunakan Supabase

Pembaca seperti anda membantu menyokong MUO. Apabila anda membuat pembelian menggunakan pautan di tapak kami, kami mungkin mendapat komisen ahli gabungan. Baca Lagi.

Paparan halaman ialah metrik penting untuk menjejak prestasi web. Alat perisian seperti Google Analitis dan Fathom menyediakan cara mudah untuk melakukan ini dengan skrip luaran.

Tetapi mungkin anda tidak mahu menggunakan perpustakaan pihak ketiga. Dalam kes sedemikian, anda boleh menggunakan pangkalan data untuk menjejaki pelawat tapak anda.

Supabase ialah alternatif Firebase sumber terbuka yang boleh membantu anda menjejaki paparan halaman dalam masa nyata.

Sediakan Tapak Anda untuk Mula Menjejaki Paparan Halaman

Anda perlu mempunyai blog Next.js untuk mengikuti tutorial ini. Jika anda belum memilikinya, anda boleh buat blog berasaskan Markdown menggunakan react-markdown .

Anda juga boleh mengklon templat pemula blog Next.js rasmi daripadanya GitHub repositori.

Supabase ialah alternatif Firebase yang menyediakan pangkalan data Postgres, pengesahan, API segera, Fungsi Edge, langganan masa nyata dan storan.

Anda akan menggunakannya untuk menyimpan paparan halaman bagi setiap catatan blog.

Buat Pangkalan Data Supabase

Pergi ke laman web Supabase dan daftar masuk atau daftar untuk akaun.

Pada papan pemuka Supabase, klik pada Projek baru dan pilih organisasi (Supabase akan mencipta organisasi di bawah nama pengguna akaun anda).

Isikan nama projek dan kata laluan kemudian klik Buat projek baharu.

Tangkapan skrin butiran projek di Supabase

Dalam halaman tetapan di bawah bahagian API, salin URL projek dan kunci awam dan rahsia.

Tangkapan skrin menunjukkan kunci API projek Supabase

Buka .env.local fail dalam projek Next.js dan salin butiran API ini.

windows_check_exception mesin 10

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

Seterusnya, navigasi ke editor SQL dan klik pada Pertanyaan baharu .

Menggunakan arahan SQL standard untuk mencipta jadual dipanggil pandangan .

 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

Sebagai alternatif, anda boleh menggunakan editor jadual untuk mencipta jadual pandangan:

Editor jadual berada di anak tetingkap kiri papan pemuka.

Buat Prosedur Tersimpan Supabase untuk Mengemas kini Paparan

Postgres mempunyai sokongan terbina dalam untuk fungsi SQL yang boleh anda panggil melalui API Supabase. Fungsi ini akan bertanggungjawab untuk menambah kiraan paparan dalam jadual paparan.

Untuk mencipta fungsi pangkalan data, ikut arahan ini:

Pergi ke bahagian editor SQL pada anak tetingkap kiri.
Klik Pertanyaan Baharu.

Tambahkan pertanyaan SQL ini untuk mencipta fungsi pangkalan data.

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

Klik Jalankan atau Cmd + Enter (Ctrl + Enter) untuk melaksanakan pertanyaan.

Fungsi SQL ini dipanggil update_views dan menerima hujah teks. Ia mula-mula menyemak sama ada catatan blog itu sudah wujud dalam jadual dan jika ia wujud, ia menambah kiraan paparannya sebanyak 1. Jika tidak, ia mencipta entri baharu untuk siaran yang kiraan paparan lalai kepada 1.

Sediakan Pelanggan Supabase dalam Next.js

Pasang dan Konfigurasi Supabase

Pasang pakej @supabase/supabase-js melalui npm untuk menyambung ke pangkalan data daripada Next.js.

 npm install @supabase/supabase-js\n

Seterusnya, buat a /lib/supabase.ts fail dalam akar projek anda dan mulakan klien Supabase.

bagaimana untuk mendapatkan lebih banyak tinjauan google

 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

Ingat anda telah menyimpan bukti kelayakan API dalam .env.local apabila anda mencipta pangkalan data.

Kemas kini Paparan Halaman

Buat laluan API yang mengambil paparan halaman daripada Supabase dan mengemas kini kiraan paparan setiap kali pengguna melawat halaman.

Anda akan membuat laluan ini dalam /api folder di dalam fail yang dipanggil pandangan/[slug].ts . Menggunakan kurungan di sekeliling nama fail mencipta laluan dinamik. Parameter yang dipadankan akan dihantar sebagai parameter pertanyaan yang dipanggil 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

Pernyataan if pertama menyemak sama ada permintaan itu adalah permintaan POST. Jika ya, ia memanggil fungsi SQL update_views dan menghantar dalam slug sebagai hujah. Fungsi ini akan menambah kiraan paparan atau membuat entri baharu untuk siaran ini.

Pernyataan if kedua menyemak sama ada permintaan adalah kaedah GET. Jika ya, ia mengambil jumlah kiraan paparan untuk siaran itu dan mengembalikannya.

Jika permintaan itu bukan permintaan POST atau GET, fungsi pengendali mengembalikan mesej 'Permintaan tidak sah'.

Tambah Paparan Halaman pada Blog

Untuk menjejak paparan halaman, anda perlu menekan laluan API setiap kali pengguna menavigasi ke halaman.

Mulakan dengan memasang pakej swr. Anda akan menggunakannya untuk mengambil data daripada API.

 npm install swr\n

swr bermaksud basi manakala pengesahan semula. Ia membolehkan anda memaparkan paparan kepada pengguna sambil mengambil data terkini di latar belakang.

Kemudian buat komponen baharu yang dipanggil viewsCounter.tsx dan tambah yang berikut:

 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

Komponen ini memaparkan jumlah paparan untuk setiap blog. Ia menerima slug siaran sebagai prop dan menggunakan nilai itu untuk membuat permintaan kepada API. Jika API mengembalikan paparan, ia memaparkan nilai itu sebaliknya ia memaparkan '0 paparan'.

Untuk mendaftarkan paparan, tambahkan kod berikut pada komponen yang menjadikan setiap siaran.

bagaimana saya memeriksa mac saya untuk virus

 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

Semak pangkalan data Supabase untuk melihat bagaimana kiraan paparan dikemas kini. Ia sepatutnya meningkat sebanyak 1 setiap kali anda melawati siaran.

Menjejaki Lebih Daripada Paparan Halaman

Paparan halaman memberitahu anda berapa ramai pengguna yang melawat halaman tertentu di tapak anda. Anda boleh melihat halaman mana yang berprestasi baik dan mana yang tidak.

Untuk pergi lebih jauh, jejaki perujuk pelawat anda untuk melihat dari mana trafik datang atau buat papan pemuka untuk membantu menggambarkan data dengan lebih baik. Ingat bahawa anda sentiasa boleh memudahkan perkara dengan menggunakan alat analitis seperti Google Analitis.