קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

צפיות בדפים הן מדד חשוב למעקב אחר ביצועי האינטרנט. כלי תוכנה כמו Google Analytics ו-Fathom מספקים דרך פשוטה לעשות זאת עם סקריפט חיצוני.

אבל אולי אתה לא רוצה להשתמש בספריית צד שלישי. במקרה כזה, אתה יכול להשתמש במסד נתונים כדי לעקוב אחר המבקרים באתר שלך.

Supabase היא אלטרנטיבה של Firebase בקוד פתוח שיכולה לעזור לך לעקוב אחר צפיות בדפים בזמן אמת.

הכן את האתר שלך כדי להתחיל לעקוב אחר צפיות בדפים

אתה צריך שיהיה לך בלוג Next.js כדי לעקוב אחר המדריך הזה. אם עדיין אין לך אחד, אתה יכול צור בלוג מבוסס Markdown באמצעות react-markdown.

אתה יכול גם לשכפל את תבנית ההתחלה הרשמית של הבלוג Next.js מתוך שלה GitHub מאגר.

Supabase היא אלטרנטיבה של Firebase המספקת מסד נתונים Postgres, אימות, ממשקי API מיידיים, פונקציות Edge, מנויים בזמן אמת ואחסון.

אתה תשתמש בו כדי לאחסן את תצוגות העמוד עבור כל פוסט בבלוג.

צור מסד נתונים של Supabase

עבור אל אתר Supabase ולהיכנס או להירשם לחשבון.

בלוח המחוונים של Supabase, לחץ על פרוייקט חדש ובחר ארגון (Supabase תיצור ארגון תחת שם המשתמש של החשבון שלך).

instagram viewer

מלא את שם הפרויקט ואת הסיסמה ולאחר מכן לחץ צור פרויקט חדש.

בדף ההגדרות מתחת לקטע API, העתק את כתובת האתר של הפרויקט ואת המפתחות הציבוריים והסודיים.

פתח את ה .env.local קובץ בפרויקט Next.js והעתק את פרטי ה-API הללו.

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

לאחר מכן, נווט אל עורך SQL ולחץ על שאילתה חדשה.

להשתמש ב פקודת SQL רגילה ליצירת טבלה שקוראים לו צפיות.

לִיצוֹרשולחן תצוגות (\n תְעוּדַת זֶהוּתbigintנוצרעל ידיבְּרִירַת מֶחדָלכפי שזהות יְסוֹדִי מַפְתֵחַ,\n שבלול טֶקסטייחודילֹאריק,\n צפיות_ספירת bigintבְּרִירַת מֶחדָל1לֹאריק,\n updated_at חותמת זמןבְּרִירַת מֶחדָלעַכשָׁיו() לֹאריק\n);\n

לחלופין, תוכל להשתמש בעורך הטבלה כדי ליצור את טבלת התצוגות:

עורך הטבלה נמצא בחלונית השמאלית של לוח המחוונים.

צור נוהל מאוחסן של Supabase לעדכון תצוגות

ל-Postgres יש תמיכה מובנית בפונקציות SQL שניתן לקרוא להן דרך ממשק ה-API של Supabase. פונקציה זו תהיה אחראית להגדלת ספירת הצפיות בטבלת הצפיות.

כדי ליצור פונקציית מסד נתונים, בצע את ההוראות הבאות:

  1. עבור למקטע עורך SQL בחלונית השמאלית.
  2. לחץ על שאילתה חדשה.
  3. הוסף שאילתת SQL זו כדי ליצור את פונקציית מסד הנתונים. 
    לִיצוֹראוֹהחלףפוּנקצִיָה update_views (page_slug טֶקסט)
    החזרות בָּטֵל
    LANGUAGE plpgsql
    כפי ש $$
    התחל
     אם קיים (בחרמ צפיות איפה slug=page_slug) לאחר מכן
    עדכון צפיות
    מַעֲרֶכֶת view_count = צפיות_ספירת + 1,
     updated_at = now()
     WHERE slug = page_slug;
    אַחֵר
    לְהַכנִיסלְתוֹך צפיות (שבלול) ערכים (page_slug);
    סוֹףאם;
    סוֹף;
    $$;
  4. לחץ על הפעלה או על Cmd + Enter (Ctrl + Enter) כדי לבצע את השאילתה.

פונקציית SQL זו נקראת update_views ומקבלת ארגומנט טקסט. תחילה הוא בודק אם הפוסט הזה בבלוג כבר קיים בטבלה ואם כן, הוא מגדיל את ספירת הצפיות שלו ב-1. אם לא, זה יוצר ערך חדש עבור הפוסט שמספר הצפיות שלו כברירת מחדל ל-1.

הגדר את לקוח Supabase ב-Next.js

התקן והגדר את Supabase

התקן את החבילה @supabase/supabase-js דרך npm כדי להתחבר למסד הנתונים מ-Next.js.

npm להתקין @supabase/supabase-js\n

לאחר מכן, צור א /lib/supabase.ts קובץ בשורש הפרויקט שלך ואתחול לקוח Supabase.

יְבוּא { createClient } מ'@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);\nייצא { supabase };\n

זכור ששמרת את אישורי ה-API ב-.env.local כאשר יצרת את מסד הנתונים.

עדכן תצוגות עמוד

צור מסלול API שמביא את הצפיות בדפים מ-Supabase ומעדכן את ספירת הצפיות בכל פעם שמשתמש מבקר בדף.

אתה תיצור את המסלול הזה ב- /api תיקייה בתוך קובץ בשם צפיות/[שבלול].ts. שימוש בסוגריים סביב שם הקובץ יוצר מסלול דינמי. פרמטרים תואמים יישלחו כפרמטר שאילתה הנקרא slug.

יְבוּא { supabase } מ"../../../lib/supabase/admin";\nייבא { NextApiRequest, NextApiResponse } מ"הַבָּא";\nconst handler = אסינכרון (בקשה: NextApiRequest, מילואים: NextApiResponse) => {\n אם (שיטה "הודעה") {\n לְהַמתִין supabase.rpc("עדכון_צפיות", {\n page_slug: req.query.slug,\n });\n לַחֲזוֹר res.status(200).json({\n הודעה: "הַצלָחָה",\n });\n }\n אם (שיטה "לקבל") {\n const { נתונים } = לְהַמתִין supabase\n .from("צפיות")\n .select("ספירת_צפיות")\n .filter("שבלול", "eq", req.query.slug);\n אם (נתונים) {\n לַחֲזוֹר res.status(200).json({\n סה"כ: נתונים[0]?.view_count || 0,\n });\n }\n }\n לַחֲזוֹר res.status(400).json({\n הודעה: "בקשה שגויה",\n });\n};\nייצוא בְּרִירַת מֶחדָל מטפל;\n

הצהרת if הראשון בודקת אם הבקשה היא בקשת POST. אם כן, הוא קורא לפונקציית update_views SQL ומעביר ב-slug כארגומנט. הפונקציה תגדיל את ספירת הצפיות או תיצור ערך חדש עבור פוסט זה.

הצהרת if השני בודקת אם הבקשה היא שיטת GET. אם כן, הוא מביא את ספירת הצפיות הכוללת עבור אותו פוסט ומחזיר אותו.

אם הבקשה אינה בקשת POST או GET, פונקציית המטפל מחזירה הודעת "בקשה לא חוקית".

הוסף תצוגות עמוד לבלוג

כדי לעקוב אחר צפיות בדף, עליך להגיע למסלול ה-API בכל פעם שמשתמש מנווט לדף.

התחל בהתקנת חבילת swr. אתה תשתמש בו כדי להביא את הנתונים מה-API.

npm להתקין swr\n

swr מייצג stale while revalidate. זה מאפשר לך להציג את התצוגות למשתמש תוך שליפת נתונים עדכניים ברקע.

לאחר מכן צור רכיב חדש בשם viewsCounter.tsx והוסף את הדברים הבאים:

יְבוּא השתמש בSWR מ"סוור";\nאביזרי ממשק {\n שבלול: מחרוזת;\n}\nconst fetcher = אסינכרון (קלט: RequestInfo) => {\n const res: תגובה = לְהַמתִין אחזר (קלט);\n לַחֲזוֹרלְהַמתִין res.json();\n};\nconst ViewsCounter = ({ slug }: אביזרים) => {\nconst { data } = useSWR(`/api/views/${סלוג}`, מאחזר);\nהחזר (\n {`${\n (נתונים?.total)? data.total :"0"\n } צפיות`}</span>\n );\n};\nיצוא ברירת המחדל של ViewsCounter;\n

רכיב זה מציג את סך כל הצפיות עבור כל בלוג. הוא מקבל את שבלול של פוסט כאביזר ומשתמש בערך זה כדי לשלוח את הבקשה ל-API. אם ה-API מחזיר תצוגות, הוא מציג את הערך הזה אחרת הוא מציג "0 צפיות".

כדי לרשום צפיות, הוסף את הקוד הבא לרכיב שמעבד כל פוסט.

יְבוּא { useEffect } מ"לְהָגִיב";\nייבא ViewsCounter מ"../../components/viewsCounter";\nאביזרי ממשק {\n שבלול: מחרוזת;\n}\nconst Post = ({ שבלול }: אביזרי) => {\n useEffect(() => {\n אחזר(`/api/views/${סלוג}`, {\n שיטה: 'הודעה'\n });\n }, [שבלול]);\nהחזרה (\n 
\n \n // תוכן הבלוג\n 

\n)\n}\nייצא פוסט ברירת מחדל\n

בדוק את מסד הנתונים של Supabase כדי לראות כיצד ספירת הצפיות מתעדכנת. זה אמור לעלות ב-1 בכל פעם שאתה מבקר בפוסט.

מעקב אחר יותר מצפיות בדף

תצוגות עמוד מאפשרות לך לדעת כמה משתמשים מבקרים בדפים ספציפיים באתר שלך. אתה יכול לראות אילו דפים מניבים ביצועים טובים ואילו לא.

כדי ללכת רחוק עוד יותר, עקוב אחר המפנה של המבקר שלך כדי לראות מאיפה מגיעה התנועה או צור לוח מחוונים שיעזור לדמיין את הנתונים בצורה טובה יותר. זכור שאתה תמיד יכול לפשט דברים על ידי שימוש בכלי ניתוח כמו Google Analytics.