~/nilysme
dispo · stage 19 avr.–4 sept. 2027dispo 2027
cd ~/blog

jules@halfnil:~$ cat ~/blog/afficher-sa-presence-discord-avec-lanyard.md

Un widget « now » avec sa présence Discord (Lanyard).

Afficher en temps quasi réel ce que je fais — en ligne, en jeu, en musique — sur ma page à-propos, sans bot ni backend, grâce à l'API Lanyard.

4 juillet 2026 · 2 min · #discord #api #react

Sur ma page à-propos, un petit encart $ now affiche mon statut Discord en direct : en ligne ou pas, mon statut perso, le jeu en cours, ce que j'écoute sur Spotify. Zéro backend de mon côté — tout vient de Lanyard.

## Comment ça marche

Lanyard est un service open source : un bot Discord observe votre présence et l'expose en JSON public. Une seule condition : rejoindre leur serveur Discord pour que le bot vous voie. Ensuite :

GET https://api.lanyard.rest/v1/users/<votre_id>

renvoie votre statut (online, idle, dnd, offline), vos activités et, si vous écoutez Spotify, le titre et l'artiste.

## Le widget côté React

Le composant tient en quelques idées :

tsx
const load = async () => {
  const res = await fetch(`https://api.lanyard.rest/v1/users/${discordId}`);
  const json = await res.json();
  if (json?.success) setData(json.data);
};
load();
const id = setInterval(load, 30000); // toutes les 30 s

Un point qui m'a pris du temps : le tableau activities mélange tout, et c'est le champ type qui distingue les cas — 0 pour « joue à », 3 pour « regarde » (Crunchyroll par exemple), 4 pour le statut personnalisé. Il faut chercher chaque type explicitement plutôt que prendre la première activité venue.

ts
const custom   = acts.find((a) => a.type === 4)?.state;
const game     = acts.find((a) => a.type === 0);
const watching = acts.find((a) => a.type === 3);

Lanyard propose aussi une WebSocket pour du vrai temps réel ; pour un widget de page à-propos, un polling à 30 secondes fait le même effet sans garder de connexion ouverte.

## Les détails qui font propre

  • Trois états d'affichage : chargement, erreur (« statut indisponible »), données. Le widget ne casse jamais la page si l'API est down.
  • L'ID Discord n'est pas un secret — il est visible par n'importe qui sur Discord. Le mettre dans une variable NEXT_PUBLIC_* est donc correct.
  • Quand il n'y a rien à montrer : « rien de spécial en ce moment ». Un état vide honnête vaut mieux qu'un encart qui disparaît.

## Ce que je retiens

Le meilleur « contenu dynamique » d'un site perso, c'est celui qui se met à jour tout seul. Ce widget vit sa vie depuis que je l'ai posé — et il rend la page à-propos vivante à chaque visite.

## Pour aller plus loin