如何使用 Supabase 跟踪博客的頁面瀏覽量

頁面瀏覽量是跟踪網絡性能的重要指標。Google Analytics 和 Fathom 等軟件工具提供了一種使用外部腳本執行此操作的簡單方法。

但也許您不想使用第三方庫。在這種情況下，您可以使用數據庫來跟踪您網站的訪問者。

Supabase 是一種開源的 Firebase 替代品，可以幫助您實時跟踪頁面瀏覽量。

準備您的網站以開始跟踪頁面瀏覽量

您需要有一個 Next.js 博客才能學習本教程。如果您還沒有，可以使用 react-markdown 創建一個基於 Markdown 的博客。

您還可以從其GitHub存儲庫中克隆官方 Next.js 博客入門模板。

Supabase 是 Firebase 的替代品，它提供 Postgres 數據庫、身份驗證、即時 API、Edge Functions、實時訂閱和存儲。

您將使用它來存儲每篇博文的頁面瀏覽量。

創建一個 Supabase 數據庫

轉到Supabase 網站並登錄或註冊一個帳戶。

在 Supabase 儀表板上，單擊“新建項目”並選擇一個組織（Supabase 將在您的帳戶用戶名下創建一個組織）。

填寫項目名稱和密碼，然後單擊創建新項目。

在 API 部分下的設置頁面中，複製項目 URL 以及公鑰和私鑰。

打開 Next.js 項目中的.env.local文件並複制這些 API 詳細信息。

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

接下來，導航到 SQL 編輯器並單擊New query。

使用標準 SQL 命令創建一個名為views的表。

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

或者，您可以使用表編輯器創建視圖表：

表編輯器位於儀表板的左窗格中。

創建一個 Supabase 存儲過程來更新視圖

Postgres 內置了對 SQL 函數的支持，您可以通過 Supabase API 調用這些函數。此函數將負責增加視圖表中的視圖計數。

要創建數據庫函數，請按照以下說明操作：

1. 轉到左側窗格中的 SQL 編輯器部分。
2. 單擊新建查詢。
3. 添加此 SQL 查詢以創建數據庫函數。 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;
$$;

4. 單擊運行或 Cmd + Enter (Ctrl + Enter) 以執行查詢。

此 SQL 函數稱為 update_views 並接受一個文本參數。它首先檢查該博客帖子是否已存在於表中，如果存在，則將其查看次數增加 1。如果不存在，則為該帖子創建一個新條目，其查看次數默認為 1。

在 Next.js 中設置 Supabase 客戶端

安裝和配置 Supabase

通過 npm 安裝 @supabase/supabase-js 包以從 Next.js 連接到數據庫。

npm install @supabase/supabase-js\n

接下來，在項目的根目錄中創建一個/lib/supabase.ts文件並初始化 Supabase 客戶端。

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

請記住，您在創建數據庫時將 API 憑證保存在 .env.local 中。

更新頁面瀏覽量

創建一個 API 路由，從 Supabase 獲取頁面瀏覽量，並在用戶每次訪問頁面時更新瀏覽量。

您將在名為views/[slug].ts的文件內的/api文件夾中創建此路由。在文件名周圍使用方括號可創建動態路由。匹配的參數將作為稱為 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

第一個 if 語句檢查請求是否是 POST 請求。如果是，它調用 update_views SQL 函數並將 slug 作為參數傳遞。該函數將增加查看次數或為此帖子創建一個新條目。

第二個 if 語句檢查請求是否為 GET 方法。如果是，它會獲取該帖子的總查看次數並將其返回。

如果請求不是 POST 或 GET 請求，則處理函數返回“無效請求”消息。

將頁面瀏覽量添加到博客

要跟踪頁面瀏覽量，您需要在每次用戶導航到頁面時點擊 API 路由。

首先安裝 swr 包。您將使用它從 API 獲取數據。

npm install swr\n

swr 代表 stale 而 revalidate。它允許您在後台獲取最新數據的同時向用戶顯示視圖。

然後創建一個名為 viewsCounter.tsx 的新組件並添加以下內容：

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

該組件呈現每個博客的總瀏覽量。它接受帖子的 slug 作為 prop，並使用該值向 API 發出請求。如果 API 返回視圖，它會顯示該值，否則會顯示“0 視圖”。

要註冊視圖，請將以下代碼添加到呈現每個帖子的組件中。

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

檢查 Supabase 數據庫以查看查看計數是如何更新的。每次訪問帖子時它應該增加 1。

跟踪的不僅僅是頁面瀏覽量

頁面瀏覽量讓您知道有多少用戶正在訪問您網站上的特定頁面。您可以查看哪些頁面表現良好，哪些表現不佳。

更進一步，跟踪訪問者的引薦來源以查看流量​​來自何處或創建儀表板以幫助更好地可視化數據。請記住，您始終可以使用 Google Analytics 等分析工具來簡化事情。