Une fois ton projet déployé, la question qui suit naturellement est : qui visite mon site, comment il se comporte, et pourquoi telle requête a échoué en prod ? Vercel propose trois outils intégrés pour répondre à ces questions : Web Analytics (trafic), Speed Insights (performances perçues) et les Logs (débogage runtime).
Web Analytics : trafic sans cookies
Web Analytics collecte les pageviews, les sources de trafic, les appareils et les pays de tes visiteurs - sans cookies, sans consentement RGPD à demander. Les données sont agrégées côté serveur, les IP ne sont jamais stockées.
Activer dans le dashboard
Dans ton projet Vercel, clique sur Analytics dans la barre latérale, puis sur le bouton Enable en haut à droite. Vercel ajoutera les routes de collecte au prochain déploiement.
Installer le paquet
Ajouter le composant au layout
Pour un projet Next.js App Router, ajoute <Analytics /> dans ton layout racine :
// app/layout.tsx
import { Analytics } from '@vercel/analytics/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body>
{children}
<Analytics />
</body>
</html>
);
}Déploie ton projet après cette modification. La collecte démarre dès le premier visiteur.
Lire le dashboard Web Analytics
Le dashboard présente plusieurs panneaux utiles :
- Visitors / Pageviews : courbe du trafic sur la période sélectionnée.
- Top Pages : les pages les plus visitées. Un pic sur
/404signale probablement un lien cassé externe ou une redirection manquante. - Referrers : d'où viennent tes visiteurs (Google, réseaux sociaux, direct).
- Devices / Countries : répartition mobile/desktop et géographie.
Le filtre Time Range en haut à droite te permet de comparer semaine par semaine.
Speed Insights : performances vécues par tes utilisateurs
Speed Insights collecte les Core Web Vitals directement depuis les navigateurs de tes visiteurs (RUM - Real User Monitoring). Ce sont les métriques que Google utilise pour le référencement.
| Métrique | Ce qu'elle mesure | Seuil "bon" |
|---|---|---|
| LCP (Largest Contentful Paint) | Temps d'affichage du plus grand élément visible | ≤ 2,5 s |
| INP (Interaction to Next Paint) | Réactivité aux interactions utilisateur | ≤ 200 ms |
| CLS (Cumulative Layout Shift) | Stabilité visuelle de la page | ≤ 0,1 |
Activer dans le dashboard
Dans ton projet Vercel, clique sur Speed Insights dans la barre latérale, puis sur Enable.
Installer le paquet
Ajouter le composant au layout
// app/layout.tsx
import { Analytics } from '@vercel/analytics/next';
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="fr">
<body>
{children}
<Analytics />
<SpeedInsights />
</body>
</html>
);
}Lire le dashboard Speed Insights
Le dashboard affiche un Real Experience Score (RES) de 0 à 100 - un 90+ est considéré "bon". Les données sont affichées au percentile P75 par défaut : cela signifie que 75 % de tes visiteurs ont une expérience meilleure ou égale à la valeur affichée.
Tu peux basculer entre Mobile et Desktop en haut du dashboard - les scores varient souvent significativement. Un LCP élevé sur mobile pointe souvent vers des images trop lourdes ou un JavaScript trop volumineux.
Logs runtime : déboguer en production
Les Logs te donnent accès aux sorties de tes Vercel Functions (API Routes, Server Components, Middleware) en temps réel ou sur les dernières heures.
Accéder aux logs
Dans ton projet Vercel, clique sur Logs dans la barre latérale. Tu vois défiler les requêtes entrantes avec leur statut HTTP, leur durée et leur route.
Filtres utiles
- Level : filtre par
Warning(4xx) ouError(5xx,console.error). Indispensable pour repérer les erreurs sans lire toutes les lignes. - Route : isole une route spécifique (ex:
/api/contact) pour déboguer sans bruit. - Status Code : filtre direct sur les 404, 500, etc.
- Live mode : suit les logs en temps réel pendant que tu reproduis un bug.