Mettre en place un e-commerce headless avec Next.js

Il existe un panel de CMS dans l’environnement du e-commerce, mais cela évolue. Aujourd’hui nous avons une tendance à vouloir / devoir dissocier chaque élément de la constitution d’une boutique en ligne pour tirer le maximum des outils qui donnent vie au système. Alors, pourquoi passer au e-commerce headless et quels sont les avantages de cette méthode ?

Aujourd’hui vous avez des CMS qui proposent une solution globale pour déployer un système de e-commerce avec l’ensemble des briques fonctionnelles afin que vous puissiez vendre sur internet, gérer du click and collect, gérer vos stocks, produits et clients. Avec un système headless vous allez dissocier chaque brique majeure et avoir plusieurs outils.

Vous allez avoir au minimum un PIM (product information management) pour gérer votre catalogue produit, catégories, déclinaisons et commandes. Un CRM (Customer Relationship Management) permettant quant à lui de gérer vos clients, la relation client et votre site internet qui va s’appuyer sur les APIs de votre PIM et CRM pour fonctionner.

Il est bien sûr possible de rajouter des briques en fonction de la typologie de produit que vous allez vendre.

Le plus gros avantage est d’avoir le choix d’utiliser les outils que vous souhaitez, ceux qui correspondent le plus à vos besoins et pourquoi pas de développer des interfaces personnalisées afin de répondre exactement à vos problématiques. Cela permet de faciliter la maintenance, d’avoir la main sur chaque brique et ainsi de ne pas travailler sur une grosse solution monolithique comme la majeure partie des CMS e-commerce actuels.

Si vous êtes amené à grossir rapidement et gérer de plus en plus de volume, vous allez également apprécier le choix du headless. Le headless vous permettra de ne faire évoluer que les briques qui sont nécessaires à votre croissance, sans devoir envisager de refonte globale ou de migration vers un CMS plus solides. Phénomène récurrent chez bon nombre de e-commerçant passant de Prestashop à Magento.

Voici un exemple de ce qu’il est possible de faire avec Next.js qui est aujourd’hui une solution incontournable pour mettre en place un site indexable par Google, rapide et moderne. Pour aller plus loin nous allons voir comment le coupler avec un PIM headless et comment gérer le processus de panier sans avoir à développer un CRM.

Crystallize est une solution Saas de PIM headless avec une interface GraphQL pour les requêtes API dédiées à la boutique en ligne. Vous allez pouvoir :

• Gérer vos produits, les différentes déclinaisons
• L’arborescence des catégories et mailler votre catalogue
• Ajouter et gérer vos contenus comme des pages guides
• D'avoir vos propres templates de page pour laisser place à votre imagination.

Un outil extrêmement puissant, car vous allez pouvoir gérer au même endroit l’ensemble de la boutique afin de gagner en visibilité sur les moteurs de recherche. Parfait pour le SEO et pour optimiser des landing page.

La gestion des commandes est également incluse. Elle permet de définir un processus de commande personnalisé et adapté à votre activité. Vous pouvez également déclencher des actions à chaque étape après le paiement de la commande et d’assurer un suivi parfait.

Bénéficiez d’un free tier qui inclus jusqu’à 50 commandes par mois, 1000 produits dans votre catalogue, 5 Go de bande passante pour vos assets et 25k appels à l’API. Au-delà vous serez facturé en fonction de votre consommation. Vous pouvez également souscrire à une offre incluant de l’assistance technique pour connecter au mieux la partie front de votre boutique. 

Pour gérer votre panier, vous pouvez utiliser Snipcart jusqu’au paiement avec une implémentation très simple. Il est également possible de développer un brique dans Next.js pour gérer les utilisateurs et paiements de façon plus pointue, mais cela demande du développement spécifique.

Snipcart inclut un ensemble de fonctionnalités incontournables :

• Gestion de votre tunnel de vente 


• Création et authentification des clients sur votre boutique 


• Gestion des codes promotionnels 


• Choix et calcul des livraisons 


• Relance des clients qui abandonnent leurs paniers 


• Création de campagnes d’emails à vos clients 


L’avantage de cette solution, outre le fait que vous allez pouvoir rapidement mettre en place votre boutique, est de pouvoir gérer vos utilisateurs, les paiements ainsi que les livraisons depuis une interface dédiée. Tout cela pour 2% sur les transactions effectuées sur votre boutique. Vous trouverez une démonstration du panier ici https://demo.snipcart.com/

Vous pouvez customiser vos paiements, mais cela nécessite un cout de développement supplémentaire. Nativement vous allez pouvoir connecter votre compte Stripe avec Snipcart, et gérer vos paiements par carte bancaire en marque blanche. L’utilisation de Stripe permet d’avoir une vue d’ensemble sur les transactions, d’effectuer des remboursements et d’avoir un système anti fraude intégrer puissant.

Cela n’empêche en rien de créer votre connecteur avec votre banque ou un autre moyen de paiement plus exotique.

Si vous avez envie de lancer plusieurs boutiques sur un seul catalogue, mais d'avoir des sites différents, vous allez pouvoir le faire très facilement en utilisant la Jamstack e-commerce. Étant donné que toute la stack est basée sur des API, il est possible d’imaginer plusieurs sites thématiques avec une galaxie de produits gérée au même endroit. Cela est très difficile à faire si vous partez sur un CMS classique et deviendra rapidement une usine à gaz pour la gestion des clients et commandes.

En plus des avantages cités ci-dessus, vous allez faire des économies sur la réalisation et la maintenance des boutiques que vous allez mettre en ligne. En effet vous n’avez qu’à gérer la partie visite de votre boutique et de l’améliorer pour maximiser les conversations.

Avec cette stack vous allez payer uniquement au moment où vous allez générer des ventes. Il faut réaliser  la boutique avec Next.js et gérer l’intégration mais cela vous permettra de customiser à souhait votre boutique et de pouvoir réutiliser le code pour une autre boutique sans avoir de coût supplémentaire.