Comment créer une boutique Next.js avec Commerce Layer ?

Créer une boutique e-commerce moderne ne signifie plus forcément utiliser une plateforme tout-en-un comme WooCommerce, Shopify ou PrestaShop.

Aujourd’hui, de plus en plus d’entreprises choisissent une architecture headless, où le frontend, le moteur commerce et les outils métiers sont séparés.

Dans ce type d’architecture, Next.js peut gérer l’interface utilisateur tandis que Commerce Layer gère toute la logique e-commerce : produits, prix, paniers, commandes, paiements et stocks.

Mais comment fonctionne concrètement une boutique Next.js avec Commerce Layer ?

Pourquoi associer Next.js et Commerce Layer ?

Next.js est un framework React très utilisé pour créer des sites rapides, modernes et optimisés pour le SEO.

Commerce Layer, de son côté, est une plateforme e-commerce headless. Elle ne fournit pas de thème ou de boutique prête à l’emploi. Elle expose ses fonctionnalités via des API.

L’association des deux permet de créer une boutique :

rapide
évolutive
flexible
connectée à plusieurs outils métiers
adaptée aux projets internationaux
prête pour des usages IA

Next.js gère l’expérience utilisateur. Commerce Layer gère le commerce.

Le principe d’une architecture headless

Dans une boutique classique, tout est souvent regroupé dans une seule plateforme :

affichage du site
catalogue
panier
paiement
commandes
contenu

Dans une architecture Next.js + Commerce Layer, les rôles sont séparés.

Next.js
  ↓
Commerce Layer
  ↓
ERP / PIM / CRM / Paiement / Logistique

Le frontend appelle les API Commerce Layer pour afficher les produits, créer un panier, gérer une commande ou lancer un paiement.

Les principaux composants de la boutique

1. Le frontend Next.js

Next.js sert à construire les pages visibles par les visiteurs :

page d’accueil
pages catégories
fiches produits
panier
tunnel de commande
compte client
pages SEO

Il peut utiliser le rendu serveur, la génération statique ou l’ISR selon les besoins.

2. Commerce Layer

Commerce Layer gère la partie transactionnelle :

SKU
prix
marchés
devises
promotions
paniers
commandes
paiements
expéditions

C’est la source de vérité pour les données e-commerce.

3. Le CMS

Dans beaucoup de projets, WordPress peut être utilisé comme CMS.

Il peut gérer :

les pages éditoriales
les articles
les guides
les FAQ
les contenus SEO
les contenus de marque

Dans ce cas, WordPress gère le contenu, Commerce Layer gère le commerce, et Next.js assemble l’ensemble dans une interface moderne.

4. Les outils métiers

Une architecture plus avancée peut aussi intégrer :

un PIM comme Akeneo ou Pimcore
un ERP
un CRM
Stripe ou Adyen pour le paiement
une solution logistique
un moteur de recherche comme Algolia

Étape 1 : définir l’architecture du projet

Avant d’écrire du code, il faut définir clairement les responsabilités.

Par exemple :

Fonction	Outil
Frontend	Next.js
Commerce	Commerce Layer
Contenus	WordPress
Paiement	Stripe
Catalogue enrichi	PIM
Données internes	ERP

Cette étape évite de mélanger les rôles.

Commerce Layer ne doit pas devenir un CMS. WordPress ne doit pas gérer toute la logique transactionnelle. Next.js ne doit pas contenir toute la logique métier.

Chaque outil doit avoir une fonction claire.

Étape 2 : créer le projet Next.js

La première étape technique consiste à créer une application Next.js.

npx create-next-app@latest boutique-commerce-layer

On peut ensuite prévoir une structure simple :

app/
  page.tsx
  produits/
  panier/
  checkout/

components/
  ProductCard.tsx
  ProductGrid.tsx
  CartButton.tsx

lib/
  commerce-layer.ts
  api.ts

Le dossier lib peut contenir les fonctions permettant de communiquer avec l’API Commerce Layer.

Étape 3 : connecter Commerce Layer à Next.js

Commerce Layer fonctionne avec des API.

Il faut donc configurer :

l’endpoint API
le client ID
le scope
les tokens d’accès
les variables d’environnement

Exemple de fichier .env.local :

COMMERCE_LAYER_CLIENT_ID=xxx
COMMERCE_LAYER_ENDPOINT=https://xxx.commercelayer.io
COMMERCE_LAYER_SCOPE=market:id:xxx

Ces informations permettent à Next.js de communiquer avec Commerce Layer de manière sécurisée.

Étape 4 : récupérer les produits

Une boutique Next.js doit pouvoir afficher les produits.

Selon l’architecture, les données peuvent venir :

directement de Commerce Layer
d’un PIM
de WordPress
d’une combinaison de plusieurs sources

Dans une architecture composable, il est fréquent que :

le PIM gère les informations produit détaillées
Commerce Layer gère les SKU, prix et stocks
WordPress gère les contenus éditoriaux
Next.js affiche le tout

Étape 5 : afficher les fiches produits

La fiche produit est l’un des éléments les plus importants.

Elle peut afficher :

nom du produit
description
images
variantes
prix
disponibilité
bouton d’ajout au panier

Next.js permet d’optimiser fortement ces pages pour le SEO et les performances.

Les prix et stocks peuvent être récupérés dynamiquement depuis Commerce Layer pour rester à jour.

Étape 6 : gérer le panier

Commerce Layer permet de créer et gérer des paniers via API.

Le frontend Next.js doit permettre à l’utilisateur de :

ajouter un produit au panier
modifier les quantités
supprimer un produit
consulter le total
appliquer un code promotionnel

Le panier peut être stocké côté client, côté serveur ou via une session selon les besoins du projet.

Étape 7 : gérer le checkout

Le tunnel de commande est une partie sensible.

Il doit gérer :

les informations client
l’adresse de livraison
le mode de livraison
le paiement
la confirmation de commande

Commerce Layer peut être connecté à des prestataires de paiement comme Stripe ou Adyen.

L’objectif est de garder une expérience fluide tout en sécurisant la transaction.

Étape 8 : connecter les paiements

Le paiement ne doit pas être improvisé.

Il faut prévoir :

la création de la commande
la validation du panier
la redirection ou l’intégration du paiement
la confirmation
la gestion des erreurs
les webhooks

Les webhooks sont importants pour synchroniser les événements :

paiement accepté
commande confirmée
remboursement
annulation
expédition

Étape 9 : gérer les commandes

Une fois la commande validée, Commerce Layer devient la source de vérité.

Il peut transmettre les informations à :

un ERP
un CRM
un outil logistique
une plateforme d’e-mailing
un tableau de bord interne

C’est ici que l’architecture headless montre son intérêt : chaque événement peut déclencher une action automatisée.

Étape 10 : optimiser le SEO

Avec Next.js, il est possible d’obtenir un très bon niveau de performance SEO.

Il faut toutefois bien gérer :

les balises title
les meta descriptions
les données structurées
les URLs propres
les pages catégories
les redirections
le sitemap
les performances Core Web Vitals

Une boutique headless n’est pas automatiquement meilleure pour le SEO. Elle le devient si l’architecture est correctement pensée.

Exemple d’architecture complète

WordPress
  ↓
Contenus SEO, blog, guides, FAQ

PIM
  ↓
Données produits enrichies

Commerce Layer
  ↓
Prix, stocks, paniers, commandes, paiements

Next.js
  ↓
Interface utilisateur, SEO, performance

IA / RAG
  ↓
Recherche sémantique, assistant d’achat, recommandations

Cette architecture permet de construire une boutique moderne, évolutive et prête pour les usages IA.

Les avantages d’une boutique Next.js avec Commerce Layer

Une grande liberté frontend

L’interface n’est pas limitée par un thème ou un système de template imposé.

De meilleures performances

Next.js permet de créer des pages rapides, bien optimisées et adaptées aux Core Web Vitals.

Une architecture évolutive

Chaque brique peut évoluer indépendamment.

Une meilleure intégration métier

Commerce Layer peut se connecter à des ERP, PIM, CRM et outils logistiques.

Une meilleure préparation aux usages IA

Les données étant accessibles via API, il devient plus simple de créer :

un assistant d’achat
une recherche sémantique
un moteur de recommandation
un agent IA connecté au catalogue

Les limites à connaître

Cette architecture n’est pas adaptée à tous les projets.

Elle demande :

plus de développement
plus d’intégration
plus de maintenance
une vraie réflexion technique
des compétences en API et frontend moderne

Pour une petite boutique simple, WooCommerce peut rester plus rapide et plus économique.

Pour un projet plus ambitieux, international ou connecté à plusieurs outils métiers, Next.js avec Commerce Layer peut devenir une excellente option.

Conclusion

Créer une boutique Next.js avec Commerce Layer permet de construire une plateforme e-commerce moderne, rapide et flexible.

Next.js gère l’expérience utilisateur et les performances. Commerce Layer gère la logique transactionnelle. WordPress, un PIM ou un ERP peuvent venir compléter l’architecture selon les besoins.

Cette approche est particulièrement intéressante pour les entreprises qui souhaitent aller au-delà d’une boutique classique et construire un e-commerce composable, évolutif et prêt pour les usages futurs de l’intelligence artificielle.