Rebuild Headless e-commerce – Louise Damas (Shopify × Storyblok × Next.js 15)
👉 Prêt à moderniser votre e-commerce ? Contactez-moi
🛠️ Architecture Headless Shopify × Next.js 15 : Contexte & enjeux
J’ai accompagné Unlikely Technologie pour repenser le site e-commerce Louise Damas : passage en mode headless (Shopify + Storyblok) et intégration de Next.js 15 pour renforcer performances & flexibilité.
Enjeux clés :
- 🏗️ Stack headless pour une collaboration fluide entre dev et marketing
- 🚀 Performances optimales : LCP mobile à 1,1 s • INP 45 ms • CLS 0,01
- 🧩 Blocs front modulaires pour une autonomie marketing totale
🎯 Objectifs : Performance Core Web Vitals & Modularité front
- Développer un système de blocs front modulaires (des dizaines de blocs)
- Assurer la qualité visuelle et fonctionnelle des blocs front modulaires
- Maintenir des Core Web Vitals optimisés
- Connecter des services tiers : pré-commande, Sendinblue et gestion des cookies
⚙️ Stack & outils
- Next.js 15 (App Router, Server Components, ISR)
- Storyblok (CMS headless)
- Shopify headless (API Storefront)
- SCSS, Figma
- Algolia, Sendinblue, Vercel, ClickUp, Doppler
👨💻 Rôle & contributions
-
Phase de build
- Soutien technique dans le développement et l’optimisation des blocs front modulaires (hero, carousel, produits…)
- Livraison continue des évolutions via Vercel
-
Phase post-livraison
- Support technique : participation aux réunions client et conseils sur demande
- Ajustements UX/UI, correction de bugs et optimisations ponctuelles
- Contribution à l’ajout de fonctionnalités (notifications email, pré-commandes)
📐 Architecture & approche
- Next.js 15 pour le rendu SSR/ISR et la navigation
- Storyblok pour la gestion de contenu headless
- Shopify pour la gestion des produits et du panier
- CI/CD automatisé sur Vercel
🔨 Implémentation & étapes clés
- Intégration en soutien au lead technique pour développer et optimiser les blocs front modulaires
- Développement incrémental des blocs front en plusieurs sprints
- Revue de code et tests de performance (Lighthouse, Chrome UX Report)
- Recette avec l’équipe marketing et ajustements UX/UI
- Documentation des blocs et mise en place de guidelines
✅ Résultats & metrics
- Performance : LCP mobile 1,1 s • INP 45 ms • CLS 0,01 (Chrome UX Report, avril 2025)
- Modularité : dizaines de blocs front réutilisables
- Adoption : création de pages indépendamment par le marketing
- Tickets front : diminution des demandes de corrections post-lancement
🧠 Enseignements & retours
J’ai renforcé mes compétences en conception de blocs modulaires avec Next.js 15 et affiné ma capacité à soutenir une équipe client sur le long terme, tout en garantissant performance et flexibilité.