E-commerce international headless Next.js + Shopify

Le retailer européen multimarques avec lequel nous avons travaillé opérait un e-commerce hérité d'un thème Shopify Liquid lourdement personnalisé, devenu progressivement impossible à maintenir sur les sept marchés où il était déployé. Le diagnostic technique était sans appel : Lighthouse mobile à 38, LCP à 5,8 secondes, des scripts tiers injectés sans contrôle, un CLS catastrophique provoqué par un cookie banner injecté en JavaScript. Côté business, la conversion mobile stagnait sous 0,9% et le SEO international perdait du terrain face aux pure-players locaux mieux structurés. La direction voulait conserver Shopify Plus comme back-office et OMS — l'équipe e-commerce y était formée — mais reprendre la main complète sur le front-end. Nous avons construit une architecture headless avec Next.js 14 (App Router) déployé sur Vercel Edge, connecté à l'API Storefront de Shopify Plus. La logique métier critique — checkout, panier, stocks, expéditions — reste chez Shopify ; nous ne réinventons ni les paiements ni la gestion d'inventaire. Le front consomme l'API GraphQL Storefront et utilise next-intl pour 7 pays (FR, DE, IT, ES, UK, NL, AT) et 4 langues, avec URL localisées (`/de/produkte/...` plutôt que `/de/products/...`) qui pèsent réellement dans le SEO international. Le PIM Akeneo est la source de vérité produit. Une synchronisation incrémentale quotidienne pousse les attributs, les traductions et les médias vers Shopify (pour la couche commerce) et vers Algolia (pour la recherche full-text et les facettes). Algolia gère 320 000 SKU multi-langue avec des règles métier par marché (boost des best-sellers locaux, filtrage de la disponibilité par entrepôt régional). Cette double indexation évite la classique latence du search natif Shopify et permet des temps de réponse sous 50 ms même sur les requêtes à facettes complexes. La fraîcheur des prix est un sujet sensible en e-commerce international. Nous combinons ISR (Incremental Static Regeneration) à 5 minutes pour les fiches produit, revalidation on-demand déclenchée par webhook Shopify dès qu'un prix change, et PPR (Partial Prerendering) pour isoler les fragments dynamiques — disponibilité en temps réel, panier persistant, prix promotionnels — du squelette statique. Le résultat : 95% des pages servies depuis l'Edge en sub-100 ms tout en garantissant qu'un changement de prix back-office est visible côté front en moins de 30 secondes. La partie SEO international est souvent sous-estimée. Nous avons implémenté des balises hreflang complètes croisées par paire (chaque variante linguistique pointe vers toutes les autres), des sitemaps segmentés par locale avec image-sitemap inclus, des schémas Schema.org `Product` + `Offer` + `AggregateRating` injectés en JSON-LD côté serveur, et un système de canonical strict qui résout le piège habituel des paramètres de filtre (`?color=...&size=...`) en pointant la canonique vers la fiche produit non filtrée. Trois mois après la mise en ligne, le trafic organique avait été multiplié par 2,9 sur les requêtes produit. Les paiements ont demandé une attention par pays. Shopify Markets gère la TVA OSS automatiquement (taux par pays de destination, seuils intracommunautaires, formats de facture conformes), ce qui évite une réimplémentation. Les méthodes locales — iDEAL aux Pays-Bas, Bancontact en Belgique, SOFORT en Allemagne, Cartes Bancaires en France — sont activées par marché avec leur authentification 3DS2 native, et la conversion finale a gagné 18% sur les marchés où les locaux préfèrent leurs méthodes domestiques au CB international. La performance s'est jouée sur des détails. Hero image en AVIF avec fallback WebP, dimensionnée exactement aux breakpoints réels (pas de upscaling), preloadée en `<link rel="preload" as="image">` quand elle est above-the-fold, et `fetchpriority="high"` pour donner la priorité au navigateur. Fonts auto-hébergées avec `font-display: optional` (pas swap, pour éviter FOIT/FOUT), subset latin uniquement, woff2 préchargé. Server Components partout où c'est possible, ce qui sort des dizaines de KB de JS client. Cookie banner avec hauteur réservée dès le HTML pour neutraliser le CLS au chargement. Lighthouse mobile est passé de 38 à 96, LCP de 5,8 secondes à 1,4 seconde, INP médian sous 200 ms. La conversion mobile a progressé de 47%, le revenu global de 63% sur 6 mois (déjà ajusté pour la saisonnalité), et le trafic SEO produit a été multiplié par 2,9. Le coût Vercel + Algolia + Akeneo combiné représente environ 1,1% du chiffre d'affaires, contre 0,3% pour l'ancien thème Shopify ; ce surcoût a été remboursé en moins de deux mois par la seule progression de conversion.