YourNextStore – le Shopify open source qui utilise Stripe comme backend

 (github.com/yournextstore)
1 points par GN⁺ 2024-09-12 | 1 commentaires | Partager sur WhatsApp
  • Your Next Store est un template e-commerce open source AI-native basé sur Next.js et Stripe, qui prend en charge l’auto-hébergement ainsi que le déploiement en un clic sur Vercel
  • Il fournit AGENTS.md, des patterns idiomatiques de Next.js App Router et des méthodes du SDK Commerce Kit typées, afin d’être facile à exploiter par les outils de codage IA
  • Les fonctions clés sont le checkout, la facturation et les abonnements via une intégration directe de l’API Stripe, avec des modèles de domaine typés pour les produits, options, paniers et paiements
  • La stack technique se compose de Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript et Biome
  • De theme-001 à theme-149, le projet propose 149 branches de thème ; les thèmes ne modifient que les composants visuels et les ressources statiques, tout en conservant les produits, le panier et le paiement

Aperçu du projet

  • Your Next Store est un template e-commerce open source AI-native pour Next.js
  • Il fonctionne avec Stripe et a été conçu en pensant aux outils de codage IA
  • Une démo en ligne est disponible
  • Le dépôt met en avant les caractéristiques suivantes
    • AI-Friendly Codebase : inclut AGENTS.md, des patterns idiomatiques et le SDK Commerce Kit avec des méthodes typées
    • Stripe-Native : intègre directement l’API Stripe pour gérer le checkout, la facturation et les abonnements
    • Next.js 16 : utilise App Router, React Server Components et React Compiler
    • Open Source : peut être auto-hébergé partout et déployé en un clic sur Vercel

Une conception pensée pour les outils de codage IA

  • Le projet utilise des patterns Next.js familiers pour mieux fonctionner avec les outils IA
    • Il s’appuie sur des constructions idiomatiques comme App Router, Server Components, Server Actions et "use cache"
  • Le Commerce Kit SDK définit les formes d’entrée et de sortie de méthodes comme productBrowse() et cartUpsert()
    • Le README explique qu’un LLM écrit un code correct lorsqu’il connaît le contrat
  • Les modèles de domaine comme produits, variants, panier et checkout existent déjà et sont clairement typés
    • Le LLM n’a donc pas besoin de réinventer ces modèles
  • AGENTS.md contient le contexte du projet, des exemples du SDK, des règles Biome et une checklist de validation
    • Il sert à aider les agents IA à comprendre la codebase avant d’écrire du code

Stack technique

  • Next.js 16

    • Utilise App Router, React Server Components et React Compiler

  • Bun

    • Utilisé comme runtime JavaScript rapide et gestionnaire de paquets

  • Commerce Kit SDK

    • Gère l’intégration avec les API headless commerce

  • Tailwind CSS v4

    • Utilisé pour un stylisme utility-first

  • Shadcn UI

    • Fournit plus de 50 composants accessibles basés sur Radix UI

  • TypeScript

    • Utilisé pour un développement strictement typé et sûr

  • Biome

    • Utilisé comme linter et formateur rapides

Démarrage rapide et prérequis d’exécution

  • Le démarrage rapide consiste à cloner le dépôt, installer les dépendances avec Bun, puis créer le fichier de variables d’environnement
git clone https://github.com/yournextstore/yournextstore.git
cd yournextstore && bun install
cp .env.example .env.local   # Add your YNS_API_KEY from https://yns.store/manage/settings/api
bun dev
  • Une fois lancé, le store fonctionne sur localhost:3000
  • Les prérequis sont les suivants
  • Il faut copier .env.example vers .env.local puis définir YNS_API_KEY
    • YNS_API_KEY est un jeton API délivré depuis le panneau d’administration

Thèmes et extension

  • Your Next Store propose 149 ready-made themes pour différentes catégories de boutiques
  • Chaque thème redessine entièrement la page d’accueil, le hero, la palette de couleurs et la mise en page des sections
  • Tous les thèmes sont construits sur la même core codebase
  • Les thèmes se trouvent dans les branches theme-001 à theme-149
  • Il est possible de changer de thème avec une seule commande
git checkout theme-016
  • Chaque branche de thème correspond à un seul commit au-dessus de main, et le message de commit décrit l’ambiance du thème
  • La liste complète des thèmes peut être consultée avec la commande suivante
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • Toutes les branches de thème utilisent un identifiant à trois chiffres complété par des zéros comme theme-001 … theme-149
  • Les thèmes ne modifient que les composants visuels et les ressources statiques
    • Les produits, le panier et le checkout ne changent pas

Documentation et contribution

  • Pour les conventions de code et la checklist PR, voir CONTRIBUTING.md
  • L’import de produits, la gestion du panier et le mode de construction sur YNS sont documentés dans l’API documentation

À lire aussi

1 commentaires

 
GN⁺ 2024-09-12
Avis sur Hacker News

  • Je ne pense pas que je créerais jamais quelque chose qui dépend de Stripe
    Je reconnais que les paiements sont un sujet difficile à cause de la fraude et des chargebacks, mais Stripe a un passif vraiment mauvais : gel de comptes légitimes et quasi-absence de réponse aux sollicitations. Ils imposent aussi l’arbitrage, l’arbitre dépend des revenus de Stripe, et leurs conditions leur permettent même d’investir les fonds gelés. Ils interdisent aussi les actions collectives, même si je ne sais pas si cette clause tiendrait réellement

    • Je serais curieux de savoir quelles alternatives tu recommandes

  • Je ne peux plus modifier le post, mais il y a une démo du fonctionnement de YNS ici : https://demo.yournextstore.com
    Pour voir Stripe Link, utilisez l’e-mail test@test.com puis, une fois activé, saisissez 000000

  • Cela fait longtemps que j’ai eu plusieurs fois envie de construire exactement ce genre de chose, et c’est bien fait
    Je n’ai pas encore regardé en détail, mais je me demande si les téléchargements numériques sont pris en charge. Les téléchargements de produits numériques et les téléchargements de « lead magnets » seraient très utiles à beaucoup de boutiques

    • Au début, nous nous sommes concentrés sur les produits physiques, mais ajouter une fonctionnalité de produits numériques me paraît au contraire plus simple
      Si vous avez une solution idéale en tête, ou une idée de la façon dont cela devrait fonctionner dans un scénario parfait, ce serait utile. Il nous faut des modèles de référence à la fois pour les téléchargements numériques et pour les téléchargements de lead magnets

  • La fonctionnalité que je préfère dans la démo, c’est le paiement en une seule page
    C’est très proche de l’excellent parcours de paiement de Shopify. WooCommerce devrait être la véritable alternative autohébergée à Shopify, mais il reste insuffisant et, même avec son écosystème de plugins, il est bien plus difficile d’exploiter un bon panier et un bon paiement. Félicitations pour le lancement

    • Le paiement en une seule page a toujours été l’une de nos grandes priorités, et le restera
      Il reste encore de petites améliorations à faire, mais je suis satisfait de l’expérience de paiement actuelle, qui est assez fluide. Je me demande si vous l’avez aussi essayé avec Stripe Link. Si les informations d’un achat précédent sont stockées quelque part sur Internet, tout le paiement se résume à 4 clics, sans remplir de formulaire
    • WooCommerce lui-même est globalement correct comme back-end, mais la plupart des thèmes sont médiocres
      Même les thèmes par défaut et gratuits ont des mises en page laides, sont inutilement lourds, et l’écran de paiement fait tellement amateur que beaucoup de gens peuvent avoir l’impression d’être sur un site frauduleux. Il existe de bons thèmes, mais ils coûtent assez cher
    • Le petit lien qui affiche tout le panier quand on ajoute un produit est aussi un bon détail

  • Je me demande comment est géré le calcul des frais de livraison
    Est-ce que cela fait aussi partie des fonctionnalités de catalogue produit de Stripe ?

    • Cette fonctionnalité n’est pas encore prête, mais nous y travaillons activement
      Si vous avez besoin de la livraison tout de suite, vous pouvez la confier à un tiers, et certains partenaires développent cette fonctionnalité de cette manière. À long terme, nous voulons nous intégrer plus profondément à Stripe et faire de Stripe l’infrastructure cœur de l’e-commerce
    • Ces données peuvent être obtenues auprès de plusieurs tiers
      Personnellement, je préfère Shippo, je connais aussi les fondateurs, et je l’ai déjà intégré dans Weebly, aujourd’hui au sein de Square

  • S’il n’y a pas besoin de base de données, je me demande comment fonctionne la gestion des stocks
    Par exemple, que se passe-t-il si plusieurs personnes essaient d’acheter le même produit en même temps alors que le stock est insuffisant ?

    • Au départ, nous avons commencé par stocker directement des données comme les stocks dans les métadonnées produit de Stripe
      Nous développons aussi une fine couche qui gère la synchronisation entre chaque boutique et Stripe, par exemple sur des aspects comme l’atomicité. Ce n’est pas encore la solution idéale, mais cela fonctionne bien pour la plupart des petites boutiques, et nous avons des idées pour l’améliorer. Dans ce genre de situation, une configuration composable et headless peut au contraire devenir lourde

  • J’ai essayé la démo et, comme d’autres l’ont dit, c’est vraiment bien fait et rapide
    En revanche, j’ai rencontré un bug : quand j’ai mis la quantité à 0 dans le panier pour supprimer un produit, un rafraîchissement s’est lancé et l’interface s’est figée. Je ne sais pas si c’est dû à ce comportement ou au trafic actuel, mais c’est bon à signaler

    • Nous avons confirmé ce bug, merci de l’avoir signalé
      Nous avons récemment itéré plusieurs fois sur cette partie, et quelque chose a dû nous échapper

  • C’est assez fluide, et j’aime bien la prise en charge d’Umami
    Ce serait bien d’emballer tout ça dans un Dockerfile en une seule fois, mais pour un usage personnel, ça ne devrait pas être trop difficile à faire soi-même. Je n’ai pas beaucoup utilisé Stripe récemment en dehors des abonnements, donc je me demande à quel point il serait difficile de prendre en charge les codes promo ou les soldes. Est-ce prévu ?

    • Nous expérimentons plusieurs choses en ce moment, et nous avons commencé par Umami, mais nous envisageons aussi de créer nous-mêmes une sous-fonction d’analytics dédiée à l’e-commerce
      Les coupons sont sur la feuille de route et devraient être relativement simples à ajouter. Je me demande aussi si vous seriez partant pour participer au bêta-test. Un Dockerfile a été proposé par la communauté et je compte l’examiner aujourd’hui : https://github.com/yournextstore/yournextstore/pull/22/files

  • La démo est rapide parce que les listes sont préchargées quand le curseur de la souris passe dessus ou quand on appuie dessus
    C’est une approche possible même dans l’e-commerce traditionnel, et je n’aime pas cette expérience utilisateur qui gaspille les données des utilisateurs. Y a-t-il une option pour désactiver le préchargement ?

    • Bien sûr. C’est open source pour une raison : vous pouvez forker le projet et désactiver le préchargement
      Cela dit, du point de vue de l’expérience utilisateur, je ne pense pas que ce soit le meilleur choix
    • Ce qui est configurable dans next.js semble aussi s’appliquer ici
      Mais j’ai découvert qu’il n’existe pas de moyen de désactiver globalement le préchargement[0]. Il faut le désactiver lien par lien, ou créer un composant de lien personnalisé
      [0] https://github.com/vercel/next.js/discussions/24437

  • Très bien. Je cherchais justement quelque chose comme ça
    En revanche, pendant l’installation, corepack install a échoué avec une erreur de hachage non concordant pour pnpm@9.9.0. Le hash attendu et le hash reçu étant différents, cela déclenche Internal Error: Mismatch hashes

    • Nous avons mis pnpm à jour vers la version 9.10.0, et maintenant c’est bon
    • Il va d’abord falloir que nous examinions davantage la configuration
      Pourriez-vous commencer par supprimer complètement packageManager de package.json, puis réessayer ? Si possible, j’aimerais faire un court appel vidéo pour voir directement l’environnement de reproduction. Pour l’instant, je n’arrive pas à reproduire le problème de mon côté