Ajouter Shopify à un site Next.js existant avec Hydrogen 2026-10

Parce que beaucoup de marques ont déjà une vitrine, un site de contenu ou une application web qui fonctionne. Elles veulent vendre avec Shopify (catalogue, panier, paiement, comptes clients) sans reconstruire tout le front. Jusqu’ici, le headless Shopify passait souvent par une refonte complète de vitrine. La question marchand devient : peut-on brancher le commerce Shopify sur ce qui existe déjà, plutôt que de tout reconstruire ?

Le 14 octobre 2026, Shopify annonce que Hydrogen 2026-10 est en disponibilité générale (GA). Le changelog et le récit détaillé sur shopify.dev décrivent une bibliothèque JavaScript indépendante du framework, conçue pour ajouter le commerce Shopify à une stack existante, avec des starters React Router et Next.js et des compétences (skills) pour agents de code. Le compte ShopifyDevs le résume ainsi sur X : la preview développeur framework-agnostique avait démarré en juin pour que vous gardiez votre stack ; le nouveau Hydrogen est désormais GA.

D’après le récit officiel Shopify du 14 octobre 2026, l’ancien Hydrogen était un framework bâti sur React Router : pour utiliser son panier ou son analytics, vous construisiez toute la vitrine dessus. Le nouveau Hydrogen est une bibliothèque. Vous l’ajoutez au framework que vous utilisez déjà, et vous hébergez où vous voulez. Oxygen reste gratuit.

Shopify précise aussi que la preview développeur a démarré en juin, avec sept releases basées sur les retours, avant la GA. Les vitrines Hydrogen existantes continuent de fonctionner comme aujourd’hui ; rien n’est exigé immédiatement. Quand vous serez prêt à migrer, une compétence de migration guide l’agent : vous gardez pages et routes, et vous changez d’où vient le code commerce.

Shopify résume l’idée ainsi : le gros avantage du nouveau Hydrogen, c’est qu’il n’impose pas un gros chantier. Vous amenez le commerce Shopify à votre stack en ajoutant la bibliothèque à l’app, au lieu de changer de plateforme.

Selon le récit officiel, Hydrogen prend en charge les briques commerce : panier, sélection de variantes, prix dans la devise de l’acheteur, analytics respectueux du consentement, Shop Pay et connexion client. Plus largement, Shopify liste aussi filtres de collection, recherche prédictive, Markets et comptes clients. Votre framework garde le routing, le chargement de données et le rendu ; le design reste le vôtre.

Pour démarrer, Shopify documente notamment : npx @shopify/hydrogen@latest setup dans un projet existant ; un template React Router déployable vers Oxygen depuis l’admin Shopify ; et, pour Next.js, la vitrine Vercel Shop (maintenue par Vercel, bâtie sur Hydrogen). Le package inclut aussi des compétences qui apprennent aux agents de code à l’utiliser : 20 compétences couvrant chaque partie d’une vitrine, versionnées avec le paquet installé (npx @shopify/hydrogen skills sync après upgrade).

Hydrogen 2026-10 n’annule pas Online Store ni les thèmes Liquid. Pour une boutique classique dont l’équipe vit dans l’éditeur de thème, un thème Liquid (Theme Store ou sur mesure OS 2.0) reste souvent le chemin le plus court. Voir thème existant ou sur mesure et performance Liquid ou streaming HTML.

Avant de signer un brief « headless », posez des questions opérationnelles. L’annonce Shopify clarifie le produit ; elle ne cadre pas votre gouvernance projet.

Sur le SEO : Shopify affirme que votre framework garde routing et rendu, et que le design est le vôtre. Cela veut dire aussi que la qualité SEO dépend de votre implémentation (comme sur tout front JS), pas d’un réglage magique Hydrogen. Sur la perf : hoster « n’importe où » (y compris Oxygen) est un atout documenté ; ce n’est pas une garantie de Core Web Vitals sans travail d’équipe.

Côté agents d’achat, le récit Hydrogen rappelle que les vitrines peuvent partager le même contrat panier que les thèmes Liquid (actions vitrine standard). Pour le canal agents plus large (Shop MCP, Catalog), voir aussi agents IA et Shop MCP.

Hydrogen 2026-10 est-il en GA ? Oui. Le changelog Shopify du 14 octobre 2026 annonce la disponibilité générale, confirmée par le récit « full story » et le post X de @ShopifyDevs le même jour.

Peut-on ajouter Shopify à un site Next.js existant ? Oui, c’est un cas explicitement documenté : bibliothèque framework-agnostique, starter ou vitrine Next.js (Vercel Shop), et commande de setup dans un projet existant.

Faut-il abandonner son thème Liquid ? Non. Les sources ne le demandent pas. Liquid reste pertinent pour beaucoup de boutiques Online Store ; Hydrogen vise surtout l’ajout du commerce à une stack JS existante ou une vitrine sur mesure hors thème.

Oxygen est-il encore gratuit ? Oui, selon le récit Shopify du 14 octobre 2026 : vous pouvez héberger où vous voulez, y compris sur Oxygen, qui reste gratuit.

Que deviennent les vitrines Hydrogen déjà en production ? Elles continuent de fonctionner ; aucune action immédiate n’est requise. Une compétence de migration est prévue quand vous serez prêt.

À quoi servent les compétences ? Shopify livre 20 compétences dans le projet, alignées sur la version installée, pour guider les agents de code (configuration de la vitrine, sync après upgrade).

Le 14 octobre 2026, Shopify passe Hydrogen 2026-10 en GA : une bibliothèque JavaScript indépendante du framework pour ajouter panier, variantes, Markets, analytics, Shop Pay et comptes clients à une stack existante, avec starters React Router et Next.js, hébergement libre (Oxygen inclus) et compétences pour agents de code. Dans les cas que Shopify documente, l’enjeu est de brancher le commerce Shopify sur ce que vous avez déjà, plutôt que de tout reconstruire sur un framework Hydrogen.

Pour une marque en France, le bon réflexe reste un cadrage : site existant à préserver ou boutique Liquid à optimiser ; compétences et budget de maintenance ; SEO et perf sur la stack réelle. Si vous voulez trancher Hydrogen vs thème avant d’engager un build, Lighthouse peut cadrer le brief avec vos équipes produit et tech.