Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Les pages vues sont une mesure importante pour le suivi des performances Web. Des outils logiciels comme Google Analytics et Fathom offrent un moyen simple de le faire avec un script externe.

Mais peut-être que vous ne voulez pas utiliser une bibliothèque tierce. Dans un tel cas, vous pouvez utiliser une base de données pour suivre les visiteurs de votre site.

Supabase est une alternative Firebase open source qui peut vous aider à suivre les pages vues en temps réel.

Préparez votre site pour commencer à suivre les pages vues

Vous devez avoir un blog Next.js pour suivre ce tutoriel. Si vous n'en avez pas déjà un, vous pouvez créer un blog basé sur Markdown en utilisant react-markdown.

Vous pouvez également cloner le modèle de démarrage de blog officiel Next.js à partir de son GitHub dépôt.

Supabase est une alternative à Firebase qui fournit une base de données Postgres, une authentification, des API instantanées, des fonctions Edge, des abonnements en temps réel et un stockage.

instagram viewer

Vous l'utiliserez pour stocker les pages vues pour chaque article de blog.

Créer une base de données Supabase

Allez à la Site Web Supabase et connectez-vous ou créez un compte.

Sur le tableau de bord Supabase, cliquez sur Nouveau projet et choisissez une organisation (Supabase aura créé une organisation sous le nom d'utilisateur de votre compte).

Remplissez le nom du projet et le mot de passe puis cliquez sur Créer un nouveau projet.

Dans la page des paramètres sous la section API, copiez l'URL du projet et les clés publique et secrète.

Ouvrez le .env.local fichier dans le projet Next.js et copiez ces détails d'API.

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

Ensuite, accédez à l'éditeur SQL et cliquez sur Nouvelle requête.

Utilisez le commande SQL standard pour créer une table appelé vues.

CRÉERTABLEAU vues (\n identifiantbigintGÉNÉRÉPARDÉFAUTCOMMEIDENTITÉ PRIMAIRE CLÉ,\n limace texteUNIQUEPASNUL,\n nombre_vues bigintDÉFAUT1PASNUL,\n mis à jour_à horodatageDÉFAUTMAINTENANT() PASNUL\n);\n

Vous pouvez également utiliser l'éditeur de table pour créer la table des vues :

L'éditeur de tableau se trouve dans le volet gauche du tableau de bord.

Créer une procédure stockée Supabase pour mettre à jour les vues

Postgres a un support intégré pour les fonctions SQL que vous pouvez appeler via l'API Supabase. Cette fonction sera responsable de l'incrémentation du nombre de vues dans la table des vues.

Pour créer une fonction de base de données, suivez ces instructions :

  1. Accédez à la section de l'éditeur SQL dans le volet de gauche.
  2. Cliquez sur Nouvelle requête.
  3. Ajoutez cette requête SQL pour créer la fonction de base de données. 
    CRÉEROUREMPLACERFONCTION update_views (page_slug TEXTE)
    RETOUR annuler
    LANGUE plpgsql
    COMME $$
    COMMENCER
     SI EXISTE (SÉLECTIONNERDEPUIS vues OÙ slug=page_slug) ALORS
    MISE À JOUR vues
    ENSEMBLE nombre_vues = nombre_vues + 1,
     mis à jour_at = maintenant()
     WHERE slug = page_slug;
    AUTRE
    INSÉRERdans vues (limace) VALEURS (page_slug);
    FINSI;
    FIN;
    $$;
  4. Cliquez sur Exécuter ou Cmd + Entrée (Ctrl + Entrée) pour exécuter la requête.

Cette fonction SQL s'appelle update_views et accepte un argument textuel. Il vérifie d'abord si cet article de blog existe déjà dans le tableau et si c'est le cas, il incrémente son nombre de vues de 1. Si ce n'est pas le cas, il crée une nouvelle entrée pour le message dont le nombre de vues par défaut est 1.

Configurer le client Supabase dans Next.js

Installer et configurer Supabase

Installez le package @supabase/supabase-js via npm pour vous connecter à la base de données à partir de Next.js.

installation npm @supabase/supabase-js\n

Ensuite, créez un /lib/supabase.ts à la racine de votre projet et initialisez le client Supabase.

importer { créerClient } depuis'@supabase/supabase-js';\nconst supabaseUrl: chaîne = processus.env. NEXT_PUBLIC_SUPABASE_URL || '';\nconst supabaseServerKey: chaîne = processus.env. SUPABASE_SERVICE_KEY || '';\nconst supabase = createClient (supabaseUrl, supabaseServerKey);\nexport { supabase };\n

N'oubliez pas que vous avez enregistré les informations d'identification de l'API dans .env.local lors de la création de la base de données.

Mettre à jour les pages vues

Créez une route API qui récupère les pages vues de Supabase et met à jour le nombre de vues chaque fois qu'un utilisateur visite une page.

Vous allez créer cet itinéraire dans le /api dossier à l'intérieur d'un fichier appelé vues/[slug].ts. L'utilisation de crochets autour du nom de fichier crée un itinéraire dynamique. Les paramètres correspondants seront envoyés en tant que paramètre de requête appelé slug.

importer { supbase } depuis"../../../lib/supabase/admin";\nimport { NextApiRequest, NextApiResponse } depuis"suivant";\nconst gestionnaire = asynchrone (demande: NextApiRequest, res: NextApiResponse) => {\n si (méthode requise "POSTE") {\n attendre supabase.rpc("update_views", {\n page_slug: req.query.slug,\n } );\n retour res.statut(200).json({\nmessage: "Succès",\n });\n }\n si (méthode requise "OBTENIR") {\n constante { données } = attendre supabase\n .de("vues")\n .select("nombre de vues")\n .filtre("limace", "eq", req.query.slug);\n si (données) {\n retour res.statut(200).json({\n total: données[0]?.view_count || 0,\n });\n }\n }\n retour res.statut(400).json({\nmessage: "Requête invalide",\n });\n};\nexporter défaut gestionnaire ;\n

La première instruction if vérifie si la requête est une requête POST. Si c'est le cas, il appelle la fonction SQL update_views et passe le slug comme argument. La fonction augmentera le nombre de vues ou créera une nouvelle entrée pour ce message.

La seconde instruction if vérifie si la requête est une méthode GET. Si c'est le cas, il récupère le nombre total de vues pour ce message et le renvoie.

Si la requête n'est pas une requête POST ou GET, la fonction de gestionnaire renvoie un message « Requête invalide ».

Ajouter des pages vues au blog

Pour suivre les pages vues, vous devez accéder à la route de l'API chaque fois qu'un utilisateur accède à une page.

Commencez par installer le package swr. Vous l'utiliserez pour récupérer les données de l'API.

npm installer swr\n

swr signifie obsolète pendant la revalidation. Il vous permet d'afficher les vues à l'utilisateur tout en récupérant des données à jour en arrière-plan.

Créez ensuite un nouveau composant appelé viewsCounter.tsx et ajoutez ce qui suit :

importer utiliserSWR depuis"swr";\ninterface Props {\n slug: string ;\n}\nconst fetcher = asynchrone (entrée: RequestInfo) => {\n constante res: Réponse = attendre récupérer (entrée);\n retourattendre res.json();\n};\nconst ViewsCounter = ({ limace }: accessoires) => {\nconst { données } = useSWR(`/api/vues/${limace}`, récupération );\nretourne (\n {`${\n (données ?.total)? données.total :"0"\n} vues`}</span>\n );\n};\nexporter le compteur de vues par défaut ;\n

Ce composant affiche le nombre total de vues pour chaque blog. Il accepte le slug d'un message comme accessoire et utilise cette valeur pour faire la demande à l'API. Si l'API renvoie des vues, elle affiche cette valeur sinon elle affiche "0 vues".

Pour enregistrer des vues, ajoutez le code suivant au composant qui affiche chaque publication.

importer { useEffet } depuis"réagir";\nimporter le compteur de vues depuis"../../components/viewsCounter";\ninterface Props {\n slug: string ;\n}\nconst Post = ({ limace } :accessoires) => {\n utiliseEffet(() => {\n récupérer(`/api/vues/${limace}`, {\n méthode: 'POSTE'\n });\n }, [slug]);\nretour (\n 
\n \n // contenu du blog\n 

\n)\n}\nexporter la publication par défaut\n

Vérifiez la base de données Supabase pour voir comment le nombre de vues est mis à jour. Il devrait augmenter de 1 chaque fois que vous visitez un poste.

Suivre plus que les pages vues

Les pages vues vous permettent de savoir combien d'utilisateurs visitent des pages spécifiques de votre site. Vous pouvez voir quelles pages fonctionnent bien et lesquelles ne le sont pas.

Pour aller encore plus loin, gardez une trace du référent de votre visiteur pour voir d'où vient le trafic ou créez un tableau de bord pour aider à mieux visualiser les données. N'oubliez pas que vous pouvez toujours simplifier les choses en utilisant un outil d'analyse comme Google Analytics.