On sort bientôt la V1 de Momentum Coach. C'est un grand moment pour nous. Après des mois de développement sur le moteur de génération de plans, notre integration IA et l'application mobile, il nous manquait une pièce maîtresse : notre vitrine.

Le problème ? Nous sommes une petite équipe de deux fondateurs. Nous n'avons pas de fonds illimités, et pas de budget pour une agence marketing.

Alors on a fait ce qu'on sait faire de mieux : on s'est débrouillé.

Le Setup : Une soirée, du café et une IA

L'objectif était clair : avoir une landing page qui respire le professionnalisme, qui donne confiance, et qui convertit. Pas juste un template HTML statique téléchargé sur un store.

Au lieu d'engager un designer UI/UX freelance, on a décidé de pair-programmer avec Gemini 3 Pro.

Le workflow était simple mais incroyablement efficace :

1. L'Idée (Humain) : On définit la structure, le message, et "l'âme" de la page.
2. L'Exécution (IA) : Gemini génère le code React/Tailwind, propose des palettes de couleurs, et suggère des animations.
3. Le "Polish" (Humain + IA) : On itère. "Plus sombre ici", "Ajoute un battement de cœur sur le logo Strava", "Fais un effet néon sur les cartes".

Le résultat ? Une page que nous n'aurions jamais pu sortir seuls en une soirée, avec des animations complexes (marquee infini, glow effects, masques de gradients) qui auraient pris des jours à coder à la main.

Agence vs Momentum + IA : Le Match

Avant de nous lancer, on a quand même regardé ce que cela nous coûterait de passer par des pros. Le comparatif est (douloureusement) simple :

	Agence "Spécialisée"	Notre méthode (Dev + Gemini)
Budget	2 000€ - 8 000€	0€ (inclus dans notre abo LLM)
Délai	3 à 6 semaines	1 soirée (19h - 02h)
Process	Briefs, allers-retours, devis, attente	Itération en temps réel
Résultat	Très pro, mais parfois "générique"	100% sur-mesure, code source maîtrisé

On n'a pas seulement économisé de l'argent. On a gagné en vitesse. Dans une startup en phase de lancement, attendre 3 semaines pour une landing page, c'est une éternité.

Deep Dive Tech : Pourquoi pas juste du HTML ?

On aurait pu faire une page statique. C'est rapide, c'est simple. Mais la raison principale est purement pragmatique.

1. Unification du Stack (La Flemme Intelligente)

Notre Web App est déjà développée en Next.js. Pourquoi s'embêter à créer, héberger et maintenir un site WordPress ou Webflow séparé ? En intégrant la Landing directement dans notre codebase existante :

• Zéro maintenance supplémentaire : C'est le même serveur, le même pipeline de déploiement (CI/CD) que l'application.
• Réutilisation du code : Nos composants UI (boutons, inputs, typographie) sont partagés. Pas besoin de les recoder.
• Simplicité : On reste dans notre environnement de dev habituel.

2. Le Server Side Rendering (SSR) nous sauve

C'est ici que la magie opère. Historiquement, utiliser React pour une landing page était risqué pour le SEO. On était souvent obligés de maintenir une page HTML statique à part, juste pour plaire à Google.

Le SSR de Next.js change la donne et nous évite cette double maintenance :

• Adieu HTML statique : Le serveur génère le HTML à la volée. Google est content, et nous aussi car on reste dans notre codebase.
• Performance : L'affichage est instantané (comme du statique) mais 100% dynamique.
• Vivant : On peut afficher des données live (ex: "Places restantes en Beta") sans sacrifier le référencement.

3. Le Blog : Une arme SEO intégrée

Plutôt que d'héberger ce blog sur une plateforme externe (Medium, Substack), on l'a intégré directement dans notre app Next.js (/blog).

Pourquoi ? Pour le Jus SEO. Chaque article que nous écrivons, qu'il soit technique (K3s, Next.js), produit (mises à jour de la Beta) ou sur l'entraînement (méthode VDOT, nutrition), renforce l'autorité de notre domaine principal momentum-coach.fr.

Techniquement, c'est géré via :

• Des fichiers Markdown (.md) dans le repo.
• Un parsing côté serveur avec gray-matter et react-markdown.
• Une génération de métadonnées dynamique pour que chaque article ait sa propre carte Twitter/OG Image parfaite.

4. Optimisations SEO Invisibles (Le Guide Rapide)

Si vous débutez en SEO, voici les 3 piliers techniques qu'on a mis en place et pourquoi c'est crucial :

• 1. Les Métadonnées & OpenGraph (Le "Look" sur les réseaux)

  • C'est quoi ? Ce qui s'affiche quand quelqu'un partage votre lien sur LinkedIn ou WhatsApp.
  • Notre méthode : On utilise la Metadata API de Next.js pour générer dynamiquement le titre, la description et surtout l'image de prévisualisation (OG Image) pour chaque page. Une page partagée sans image = 0 clic.

• 2. La Sémantique HTML (Parler à Google)

  • C'est quoi ? Utiliser les bonnes balises (<h1>, <article>, <nav>) au lieu de simples <div>.
  • L'impact : Aider les robots de Google à comprendre la hiérarchie de l'information. Un seul <h1> par page, des <h2> pour les sous-titres. C'est la base, mais c'est souvent négligé.

• 3. Performance & Core Web Vitals (La Vitesse)

  • Le principe : Google pénalise les sites lents ou qui "sautent" pendant le chargement (Layout Shift).
  • L'astuce Next.js : Le composant <Image /> convertit automatiquement nos images en WebP (plus léger) et réserve la place exacte sur l'écran pour éviter que le texte ne bouge quand l'image charge. Résultat : un score Lighthouse de 100/100.

5. L'Arme Secrète : SSG + Cloudflare (TTFB < 50ms)

On voulait aller encore plus loin. Notre objectif : une landing page ultra-rapide, cacheable par CDN.

Le problème initial ? Notre page d'accueil faisait un check session côté serveur pour afficher soit la landing, soit le dashboard. Ça empêchait toute mise en cache.

La solution architecturale :

Avant :  / → SSR (check session) → Landing OU Dashboard  [~600ms TTFB]
Après :  / → Middleware redirect si session → /dashboard
         / → Static HTML (pré-généré)                     [~50ms TTFB]

Concrètement :

• Middleware Next.js : Redirige les utilisateurs connectés de / vers /dashboard
• force-static : La landing est générée au build, pas à chaque requête
• Cloudflare : Cache le HTML statique sur ses 300+ datacenters mondiaux

Configuration Cloudflare qu'on utilise :

• ✅ Proxy activé (nuage orange)
• ✅ Cache Everything pour les assets
• ✅ HTTP/3 + QUIC activé
• ✅ Polish (compression images auto)
• ✅ Early Hints (précharge ressources)

Autres optimisations techniques :

• Images redimensionnées et converties en WebP (-85% de poids)
• CSS critique inliné avec critters (plus de render-blocking)
• Lazy-load des composants non-critiques (confettis, modales)
• Polyfills désactivés pour navigateurs modernes (browserslist)

Le résultat ? Une landing qui charge en < 100ms pour un visiteur européen. Ça fait la différence quand chaque milliseconde compte pour le SEO et la conversion.

6. Le Saint-Graal : 100/100 partout

Après migration sur Cloudflare, SSG et toutes ces optimisations, on a lancé le verdict final : Google PageSpeed Insights.

Le résultat est sans appel.

C'est rare. Selon une étude SEO, le score PageSpeed mobile moyen des sites web est d'environ 31/100, et le premier résultat Google n'atteint en moyenne que 40/100. Atteindre 100/100 demande des choix techniques radicaux : pas de plugins lourds, pas de trackers en cascade, du SSG, et une vraie obsession pour la perf.

Le mot de la fin

Cette landing page, c'est un peu le symbole de notre approche avec Momentum : Pragmatique, Technique, et Ambitieuse.

On n'a pas besoin de millions pour faire de la qualité. On a besoin de bonnes idées, de bons outils, et de beaucoup de café.

Allez voir le résultat : momentum-coach.fr

Dites-nous ce que vous en pensez ! Le feedback est notre carburant. 🚀