Au TaquetMusic Dance Roller
Étude de cas · Aytré (La Rochelle) · 2026 · En ligne
Refonte complète du site d'une patinoire roller couverte, à Aytré, dans l'agglomération de La Rochelle.
En bref
Horaires, tarifs, cours et photos se modifient depuis l'administration, et l'accueil en tire l'état d'ouverture de la patinoire.
Ce qui a été réalisé
- Site de neuf pages ; texte et images de six d'entre elles modifiables dans l'administration
- Administration en français, avec aperçu en direct sur six pages
- Balisage pour les moteurs de recherche et redirections permanentes des anciennes adresses
- Reprise du contenu de l'ancien site et guide de mise en ligne
Le point de départ
L'ancien site, à la même adresse musicdanceroller.com, affichait « © 2014 » en pied de page. Il comptait onze pages, dont une au titre mal affiché ; rien n'y réglait l'affichage sur téléphone, et aucune donnée structurée ne décrivait la patinoire aux moteurs de recherche (horaires, adresse). Son adresse web porte le nom Music Dance Roller, alors que l'enseigne est Au Taquet.
Le cahier des charges : des textes et des images que le gérant modifie lui-même, avec un aperçu visuel et sans développeur ; un hébergement gratuit sur Vercel ; un site rapide et bien référencé.
Les décisions
7 choix, expliqués simplement. Le détail technique s'ouvre d'un clic.
Un seul site, avec une administration en français
Chaque page est décrite par des champs nommés (« Photo du bandeau », « Accroche », « Note sous les tarifs ») plutôt que par un éditeur de pages libre, jugé trop lourd pour un utilisateur non technique.
Le détail technique
- Payload CMS 3 est intégré à l'application Next.js : un seul déploiement, administration sur /admin.
- Alternatives écartées à l'étude, sans essai : Astro + Keystatic (chaque sauvegarde déclenche un commit et un build avant de voir le résultat), Next + Sanity (un studio de plus à héberger, surdimensionné pour un site de cette taille), Laravel (pas d'hébergement gratuit adapté ici ; un démarrage à froid pénaliserait le référencement).
- Modèle de contenu : 9 globals (sept pages, « Infos pratiques » et « Couleurs ») et 6 collections (cours, actualités, galerie de photos, médias, visites, utilisateurs).
Un aperçu en direct, branché sur six pages et les actualités
Le principe : modifier un texte d'un côté et voir la page changer de l'autre, avant d'enregistrer.
Le détail technique
- Trois tailles d'aperçu dans l'admin : 390×844, 820×1180 et 1440×900. livePreview.url est défini sur les 9 globals et sur la collection actualités.
- Sur les pages branchées, un Server Component charge les données par l'API locale de Payload et les passe à un Client Component. Hook maison useLiveDoc, bâti sur isLivePreviewEvent, mergeData et ready de @payloadcms/live-preview 3.88.0.
- Non branchés : liste des actualités, galerie, collection cours. Mentions légales a une URL d'aperçu mais reste un Server Component sans useLiveDoc.
Des pages préparées à l'avance, mises à jour à l'enregistrement
Un visiteur reçoit une page déjà construite. Enregistrer un contenu reconstruit les pages concernées. Sans modification, chaque page se reconstruit au plus une fois toutes les 24 heures.
Le détail technique
- Chaque page publique : dynamic = 'force-static' et revalidate = 86400. Hooks afterChange (revalidatePath) sur les 9 globals et sur 3 collections (cours, actualités, galerie), avec afterDelete ; aucun hook sur médias, utilisateurs ni visites.
- Le build enchaîne payload migrate puis next build (push: false). Deux migrations versionnées ; celle du 6 septembre est appliquée à la base en ligne.
- Images servies en AVIF, polices chargées par next/font.
Répondre d'abord : ouvert, combien, où, qui appeler
Le haut de l'accueil indique si la patinoire est ouverte (« Ouvert jusqu'à 19h », « Ouvre samedi à 14h »), puis donne le tarif, l'adresse et un bouton pour appeler. Le planning de la semaine se construit à partir des cours et des horaires de patinage libre.
Le détail technique
- Calcul côté client (lib/hours.ts, composant OpeningState), fuseau Europe/Paris, mise à jour toutes les 60 s ; avant l'hydratation, le texte reste « Ouvert au public le week-end ».
- L'annonce du moment (champ de infos-pratiques) remplace l'état d'ouverture. Limite : vacances scolaires et séances privées du mercredi sont du texte libre, pas de l'état calculé.
- Le planning (Planning.tsx) fusionne les horaires de « Patinage libre » et les créneaux de la collection cours ; il apparaît sur l'accueil et sur la page cours.
Un monde visuel à lui : la boule à facettes
Des tuiles à angles vifs sur fond sombre, trois couleurs d'accent, et une boule à facettes qui tourne, y compris quand le visiteur fait défiler la page. Elle s'arrête pour les personnes qui ont demandé moins d'animations.
Le détail technique
- Canvas 2D sans bibliothèque (lib/ball.ts) : 32 rangées de 84 facettes au plus. Une deuxième surface canvas, LightField, étale les reflets en mix-blend-mode: screen.
- Une boule sur l'accueil, la page 404 et sept pages à bandeau (patinoire, cours, anniversaires, accès, contact, actualités, galerie), aucune sur les mentions légales. L'angle est publié dans la variable CSS --a sur l'accueil seulement ; l'animation se fige sous prefers-reduced-motion.
- Le dépôt contient un fichier DESIGN.md pour le système visuel.
Préparer le référencement et les anciennes adresses
Les titres de page reprennent les termes visés : « Music Dance Roller », « patinoire roller », « La Rochelle ». Des informations lisibles par les moteurs de recherche décrivent la patinoire (adresse, horaires, téléphone). Les anciennes adresses du site redirigent vers les nouvelles pages.
Le détail technique
- Un bloc JSON-LD par page, dans le layout : une entité de types SportsActivityLocation et LocalBusiness avec adresse, géolocalisation, téléphone, openingHours et sameAs (Facebook, Instagram). NewsArticle et BreadcrumbList n'existent que sur le détail d'une actualité (aucun article en ligne).
- redirects.ts : 11 entrées, permanent: true, donc code 308 ; vérifié par curl -I sur musicdanceroller.com (11 réponses 308).
Une reprise du contenu et un guide de mise en ligne
Le contenu de l'ancien site est repris automatiquement dans l'administration : textes, tarifs de 2025, horaires, cours et photos. Un guide décrit la mise en ligne pas à pas. Le contact passe par le téléphone, l'e-mail, Facebook et Instagram.
Le détail technique
- Seed : 28 médias (26 JPEG, dont le logo, et 2 PDF) et 18 photos de galerie, envoyés vers Vercel Blob. Le contenu vient de l'ancien site d'après PRODUCT.md.
- Rejouer le seed réécrit les textes de tous les globals et écraserait des modifications faites dans l'admin (README).
En chiffres
Comptés dans le code du projet.
- 9
- pages publiques, plus un modèle pour les articles d'actualité
- 6
- pages dont texte, images et SEO se modifient dans l'administration
- 9
- globals Payload : sept pages, infos pratiques et couleurs
- 6
- collections : cours, actualités, galerie, médias, visites, comptes
- 11
- redirections permanentes (code 308) des anciennes adresses PHP
Captures d'écran
Cliquez sur une capture pour l'ouvrir en grand.
(ouvre l'image en grand dans un nouvel onglet)
(ouvre l'image en grand dans un nouvel onglet)
(ouvre l'image en grand dans un nouvel onglet)
(ouvre l'image en grand dans un nouvel onglet)Le résultat
- Le gérant peut changer un tarif ou un cours sans passer par un développeur.
- Un site qui s'affiche aussi sur téléphone, avec des images dans un format léger.
- Le nouveau site a repris le domaine d'origine, et ses anciennes adresses mènent aux nouvelles pages.
Ce que j'en retiens
Pour un gérant sans profil technique, des champs nommés en français et un aperçu en direct valent mieux que la liberté de composer ses pages. Côté base de données, la mise à jour directe du schéma bloquait la construction du site sur une question interactive : les changements de structure sont désormais préparés en local, en migrations versionnées.
Étude de cas suivante
