Aperçu
Screenshots
Site e-commerce de vente de mobilier haut de gamme, développé en Next.js avec une expérience d'achat fluide et performante.
Voir la démoLe projet
Kanap est un projet e-commerce complet dédié à la vente de mobilier contemporain. L'objectif était de créer une boutique en ligne moderne avec une navigation par catégories, des fiches produits détaillées, un panier persistant et un tunnel de commande optimisé pour maximiser les conversions.
Le choix de Next.js a été motivé par les besoins en performance et en SEO : le rendu hybride (SSG pour le catalogue, SSR pour les pages dynamiques) permet d'obtenir d'excellents scores Lighthouse tout en garantissant des données produits toujours à jour. L'application est déployée sur Vercel.
Stack technique
Challenges
Choisir la bonne stratégie de rendu pour chaque type de page : Static Site Generation pour le catalogue (performant, cacheable) et Server-Side Rendering pour les pages produit (données fraîches, SEO garanti). Configurer les revalidations ISR pour les mises à jour de stock.
Implémenter un panier qui survit au rechargement de page et à la fermeture du navigateur. Résolu avec une combinaison de Context API React et localStorage, avec une synchronisation automatique et une gestion des cas de désynchronisation.
Permettre le filtrage multi-critères (catégorie, prix, matière, couleur) sans rechargement de page. Implémenté côté client avec des URL params synchronisés, permettant le partage de recherches filtrées et le retour arrière navigateur.
Les photos de mobilier sont souvent très lourdes. Utilisation du composant next/image avec redimensionnement automatique, formats modernes (WebP/AVIF), et placeholders blur générés au build pour une expérience visuelle sans saut de layout.
Aperçu