YourNextStore – Open-Source-Shopify mit Stripe als Backend

 (github.com/yournextstore)
1 Punkte von GN⁺ 2024-09-12 | 1 Kommentare | Auf WhatsApp teilen
  • Your Next Store ist ein Stripe-basiertes Open-Source-, AI-natives Next.js-E-Commerce-Template, das Self-Hosting und One-Click-Deployment auf Vercel unterstützt
  • Damit AI-Coding-Tools gut damit arbeiten können, stellt es AGENTS.md, idiomatische Next.js-App-Router-Muster und typisierte Commerce-Kit-SDK-Methoden bereit
  • Zu den Kernfunktionen gehören Checkout, Billing und Subscriptions durch direkte Integration der Stripe API; Domain-Modelle für Produkte, Optionen, Warenkorb und Bezahlung sind typisiert strukturiert
  • Der Tech-Stack besteht aus Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript und Biome
  • Von theme-001 bis theme-149 werden 149 Theme-Branches bereitgestellt; die Themes ändern nur visuelle Komponenten und statische Assets, während Produkte, Warenkorb und Bezahlung unverändert bleiben

Projektüberblick

  • Your Next Store ist ein Open-Source-, AI-natives Next.js-E-Commerce-Template
  • Es wird von Stripe angetrieben und mit Blick auf AI-Coding-Tools entwickelt
  • Eine Live-Demo ist verfügbar
  • Das Repository hebt folgende Merkmale hervor
    • AI-Friendly Codebase: enthält AGENTS.md, idiomatische Muster und das Commerce Kit SDK mit typisierten Methoden
    • Stripe-Native: integriert die Stripe API direkt für Checkout, Billing und Subscriptions
    • Next.js 16: verwendet App Router, React Server Components und den React Compiler
    • Open Source: kann überall selbst gehostet und mit einem Klick auf Vercel deployt werden

Für AI-Coding-Tools optimiertes Design

  • Damit AI-Tools besser arbeiten können, werden vertraute Next.js-Muster verwendet
    • Eingesetzt werden idiomatische Strukturen wie App Router, Server Components, Server Actions und "use cache"
  • Das Commerce Kit SDK definiert Ein- und Ausgabeformen für Methoden wie productBrowse() und cartUpsert()
    • Laut README schreiben LLMs korrekteren Code, wenn sie den Vertrag kennen
  • Domain-Modelle wie Produkte, Varianten, Warenkorb und Checkout existieren bereits und sind klar typisiert
    • Das LLM muss diese Modelle nicht erst neu erfinden
  • AGENTS.md enthält Projektkontext, SDK-Beispiele, Biome-Regeln und eine Validierungs-Checkliste
    • Das hilft AI-Agenten, die Codebasis zu verstehen, bevor sie Code schreiben

Tech-Stack

  • Next.js 16

    • Verwendet App Router, React Server Components und den React Compiler

  • Bun

    • Wird als schnelle JavaScript-Laufzeit und Paketmanager genutzt

  • Commerce Kit SDK

    • Zuständig für die Integration der Headless-Commerce-API

  • Tailwind CSS v4

    • Wird für Utility-First-Styling eingesetzt

  • Shadcn UI

    • Bietet mehr als 50 barrierefreie Komponenten auf Basis von Radix UI

  • TypeScript

    • Wird für Entwicklung mit strenger Typsicherheit verwendet

  • Biome

    • Wird als schneller Linter und Formatter genutzt

Schnellstart und Voraussetzungen

  • Die Schnellstart-Befehle folgen dem Ablauf, das Repository zu klonen, Abhängigkeiten mit Bun zu installieren und anschließend die Umgebungsvariablendatei zu erstellen
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
  • Danach läuft der Store unter localhost:3000
  • Folgende Voraussetzungen werden benötigt
  • .env.example muss nach .env.local kopiert und YNS_API_KEY gesetzt werden
    • YNS_API_KEY ist ein API-Token, das im Admin-Panel ausgestellt wird

Themes und Erweiterbarkeit

  • Your Next Store bietet 149 fertige Themes für verschiedene Store-Kategorien
  • Jedes Theme gestaltet Startseite, Hero-Bereich, Farbpalette und Abschnittslayout vollständig neu
  • Alle Themes basieren auf derselben Core-Codebase
  • Die Themes liegen in Branches von theme-001 bis theme-149
  • Ein Theme kann mit einem einzelnen Befehl gewechselt werden
git checkout theme-016
  • Jeder Theme-Branch ist ein einzelner Commit auf main, dessen Commit-Message die Stimmung des Themes beschreibt
  • Die vollständige Theme-Liste kann mit folgendem Befehl angezeigt werden
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • Alle Theme-Branches verwenden eine dreistellige, mit Nullen aufgefüllte ID wie theme-001 … theme-149
  • Themes ändern nur visuelle Komponenten und statische Assets
    • Produkte, Warenkorb und Checkout werden nicht verändert

Dokumentation und Mitwirkung

  • Coding-Konventionen und die PR-Checkliste sind in CONTRIBUTING.md zu finden
  • Informationen zum Produktimport, zur Warenkorbverwaltung und zum Aufbau auf YNS stehen in der API documentation

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-09-12
Hacker-News-Kommentare

  • Ich würde vermutlich nie etwas bauen, das von Stripe abhängt
    Ich erkenne an, dass Zahlungen wegen Betrug und Chargebacks schwierig sind, aber Stripe hat einen viel zu schlechten Ruf, weil sie legitime Konten einfrieren und Kontaktanfragen faktisch ignorieren. Sie erzwingen außerdem Schiedsverfahren, und die Schiedsrichter hängen von Stripes Einnahmen ab; laut AGB dürfen sie eingefrorene Gelder sogar investieren. Sammelklagen sind ebenfalls ausgeschlossen, wobei ich nicht weiß, ob diese Klausel tatsächlich Bestand hat

    • Mich würde interessieren, welche Alternative du empfehlen würdest

  • Ich kann den Beitrag jetzt nicht mehr bearbeiten, aber hier ist eine Funktionsdemo von YNS: https://demo.yournextstore.com
    Um Stripe Link zu sehen, verwende die E-Mail test@test.com und gib, sobald es aktiviert ist, 000000 ein

  • Genau so etwas wollte ich schon mehrfach bauen, gut gemacht
    Ich habe es mir noch nicht im Detail angesehen, frage mich aber, ob digitale Downloads unterstützt werden. Downloads für digitale Produkte und „Lead Magnets“ könnten für viele Stores sehr hilfreich sein

    • Am Anfang lag der Fokus auf physischen Produkten, aber die Unterstützung für digitale Produkte hinzuzufügen, dürfte sogar einfacher sein
      Es wäre hilfreich zu wissen, ob es dafür eine ideale Lösung gibt oder wie es im perfekten Szenario funktionieren sollte. Ich brauche ein gutes Modell sowohl für digitale Downloads als auch für Lead-Magnet-Downloads

  • Die Funktion, die mir in der Demo am besten gefällt, ist der One-Page-Checkout
    Er kommt dem großartigen Checkout-Flow von Shopify sehr nahe. WooCommerce sollte eigentlich die echte selbstgehostete Alternative zu Shopify sein, bleibt aber noch dahinter zurück, und trotz Plugin-Ökosystem ist es deutlich schwieriger, einen guten Warenkorb und Checkout zu betreiben. Glückwunsch zum Launch

    • Der One-Page-Checkout war durchgehend eine der höchsten Prioritäten und wird das auch bleiben
      Es gibt noch kleinere Verbesserungen, aber ich bin zufrieden, wie flüssig das Checkout-Erlebnis inzwischen ist. Hast du es auch mit Stripe Link ausprobiert? Wenn frühere Kaufdaten irgendwo im Internet gespeichert sind, reduziert sich der gesamte Checkout ohne Formulareingabe auf vier Klicks
    • WooCommerce selbst ist als Backend größtenteils okay, aber die meisten Themes sind schlecht
      Selbst die Standard- und Gratis-Themes haben hässliche Layouts, sind unnötig schwergewichtig, und der Checkout wirkt so amateurhaft, dass viele Leute ihn für eine Betrugsseite halten könnten. Es gibt gute Themes, aber die kosten ordentlich Geld
    • Der kleine Link, der beim Hinzufügen eines Produkts den kompletten Warenkorb zeigt, ist ebenfalls ein nettes Detail

  • Mich würde interessieren, wie ihr die Versandkostenberechnung handhabt
    Ist das auch Teil von Stripes Produktkatalog-Funktion?

    • Diese Funktion ist noch nicht fertig, aber wir arbeiten aktiv daran
      Wenn du sofort Versand brauchst, kannst du ihn an Drittanbieter auslagern, und einige Partner entwickeln Funktionen genau auf diese Weise. Langfristig wollen wir uns tiefer mit Stripe integrieren und Stripe zur zentralen Infrastruktur für E-Commerce machen
    • Diese Daten kann man von verschiedenen Drittanbietern bekommen
      Ich persönlich bevorzuge Shippo, kenne auch die Gründer und habe es in Weebly integriert, das heute zu Square gehört

  • Wenn keine Datenbank nötig ist, wie funktioniert dann die Bestandsverwaltung?
    Was passiert zum Beispiel, wenn mehrere Leute gleichzeitig dasselbe Produkt kaufen wollen und der Bestand nicht ausreicht?

    • Anfangs haben wir Daten wie den Bestand direkt in den Produkt-Metadaten von Stripe gespeichert
      Außerdem entwickeln wir eine dünne Schicht, die Dinge wie die Synchronisierung zwischen jedem Store und Stripe verwaltet, etwa im Hinblick auf Atomarität. Es ist noch keine ideale Lösung, funktioniert aber für die meisten kleinen Stores gut, und wir haben Ideen für weitere Verbesserungen. In solchen Situationen kann ein komponierbares oder Headless-Setup eher Ballast sein

  • Ich habe die Demo ausprobiert, und wie andere schon sagten: wirklich gut gemacht und schnell
    Allerdings bin ich auf einen Bug gestoßen: Als ich im Warenkorb die Menge auf 0 gesetzt habe, um ein Produkt zu entfernen, begann ein Reload und die Oberfläche fror ein. Ich weiß nicht, ob das an diesem Verhalten oder am aktuellen Traffic liegt, aber als Hinweis ist es vielleicht nützlich

    • Ich habe den Bug bestätigt, danke fürs Melden
      Ich habe diesen Bereich zuletzt mehrfach überarbeitet, dabei scheint etwas durchgerutscht zu sein

  • Ziemlich rund, und mir gefällt die Umami-Unterstützung
    Es wäre schön, das in ein Dockerfile zu packen, aber für den Eigengebrauch dürfte das auch so nicht schwer sein. Ich habe Stripe abgesehen von Abos schon länger nicht mehr genutzt; ich frage mich, wie schwierig Support für Coupon-Codes oder Sales wäre. Ist das geplant?

    • Wir experimentieren gerade mit verschiedenen Dingen und haben mit Umami angefangen, prüfen aber auch, selbst eigens auf E-Commerce zugeschnittene Analytics-Funktionen zu bauen
      Coupons stehen auf der Roadmap und sollten sich relativ einfach hinzufügen lassen. Mich würde auch interessieren, ob du beim Betatest mitmachen würdest. Ein Dockerfile wurde von der Community vorgeschlagen, und ich werde es mir heute ansehen: https://github.com/yournextstore/yournextstore/pull/22/files

  • Der Grund, warum die Demo schnell ist, liegt darin, dass Einträge beim Überfahren mit dem Mauszeiger oder beim Tippen vorgefetcht werden
    Das ist auch im traditionellen E-Commerce möglich, und ich mag solche UX nicht, die Nutzerdaten verschwendet. Gibt es eine Option, Prefetching zu deaktivieren?

    • Natürlich. Genau dafür ist es Open Source; du kannst es forken und Prefetching deaktivieren
      Aus Sicht der User Experience halte ich das allerdings nicht für die beste Lösung
    • Was man in next.js konfigurieren kann, scheint auch hier zu gelten
      Ich habe aber herausgefunden, dass es keine Möglichkeit gibt, Prefetching global zu deaktivieren[0]. Man muss es pro Link abschalten oder eine eigene Link-Komponente bauen und verwenden
      [0] https://github.com/vercel/next.js/discussions/24437

  • Gut. Genau nach so etwas habe ich gesucht
    Allerdings bekam ich bei der Installation unter corepack install einen Hash-Mismatch-Fehler bei pnpm@9.9.0. Der erwartete Hash stimmte nicht mit dem empfangenen überein, wodurch Internal Error: Mismatch hashes ausgelöst wurde

    • Ich habe pnpm auf 9.10.0 angehoben, jetzt sollte es funktionieren
    • Ich muss mir die Konfiguration wohl noch genauer ansehen
      Kannst du zuerst versuchen, packageManager komplett aus der package.json zu entfernen und es dann erneut probieren? Falls möglich, würde ich mir die Reproduktionsumgebung gern in einem kurzen Video-Call direkt ansehen. Im Moment kann ich das Problem hier nicht reproduzieren