YourNextStore – Stripe’ı backend olarak kullanan açık kaynak Shopify

 (github.com/yournextstore)
1 puan yazan GN⁺ 2024-09-12 | 1 yorum | WhatsApp'ta paylaş
  • Your Next Store, Stripe tabanlı, açık kaynaklı, yapay zeka odaklı bir Next.js e-ticaret şablonudur; self-hosting ve Vercel tek tık dağıtımı destekler
  • Yapay zeka kodlama araçlarının daha kolay çalışabilmesi için AGENTS.md, yerleşik Next.js App Router kalıpları ve tip tanımlı Commerce Kit SDK metotları birlikte sunulur
  • Temel özellikler; Stripe API ile doğrudan entegre checkout, billing ve subscriptions olup, ürün·opsiyon·sepet·ödeme alan modelleri tiplerle düzenlenmiştir
  • Teknoloji yığını Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript ve Biome’dan oluşur
  • theme-001 ile theme-149 arasında 149 tema dalı sunulur; temalar yalnızca görsel bileşenleri ve statik varlıkları değiştirir, ürün·sepet·ödeme yapısını korur

Proje genel bakışı

  • Your Next Store, açık kaynaklı, yapay zeka odaklı bir Next.js e-ticaret şablonudur
  • Stripe ile çalışır ve yapay zeka kodlama araçları düşünülerek oluşturulmuştur
  • Canlı demo sunar
  • Deponun öne çıkardığı özellikler şunlardır
    • AI-Friendly Codebase: AGENTS.md, yerleşik kalıplar ve tipli metotlara sahip Commerce Kit SDK içerir
    • Stripe-Native: Stripe API doğrudan entegre edilerek checkout, billing ve subscriptions yönetilir
    • Next.js 16: App Router, React Server Components ve React Compiler kullanır
    • Open Source: Her yerde self-host edilebilir ve Vercel’e tek tıkla dağıtılabilir

Yapay zeka kodlama araçları için dost tasarım

  • Yapay zeka araçlarının daha iyi çalışması için alışıldık Next.js kalıpları kullanılır
    • App Router, Server Components, Server Actions ve "use cache" gibi yerleşik yapılar kullanılır
  • Commerce Kit SDK, productBrowse() ve cartUpsert() gibi metotlarda giriş-çıkış biçimlerini tanımlar
    • README, LLM sözleşmeyi bildiğinde doğru kodu yazabildiğini açıklar
  • Ürün, variants, sepet ve checkout gibi alan modelleri zaten mevcuttur ve tipleri nettir
    • LLM’in bu modelleri yeniden üretmesine gerek kalmaz
  • AGENTS.md, proje bağlamı, SDK örnekleri, Biome kuralları ve doğrulama kontrol listesi içerir
    • Amaç, yapay zeka ajanlarının kod yazmadan önce kod tabanını anlamasına yardımcı olmaktır

Teknoloji yığını

  • Next.js 16

    • App Router, React Server Components ve React Compiler kullanır

  • Bun

    • Hızlı bir JavaScript runtime’ı ve paket yöneticisi olarak kullanılır

  • Commerce Kit SDK

    • Headless commerce API entegrasyonunu üstlenir

  • Tailwind CSS v4

    • Utility-first stillendirme için kullanılır

  • Shadcn UI

    • Radix UI tabanlı, erişilebilir 50’den fazla bileşen sunar

  • TypeScript

    • Sıkı tip güvenliğiyle geliştirme için kullanılır

  • Biome

    • Hızlı bir linter ve formatter olarak kullanılır

Hızlı başlangıç ve çalışma koşulları

  • Hızlı başlangıç komutları; depoyu klonlama, Bun ile bağımlılıkları kurma ve ortam değişkeni dosyasını oluşturma akışını içerir
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
  • Çalıştırmanın ardından mağaza localhost:3000 üzerinde açılır
  • Gereksinimler şunlardır
  • .env.example, .env.local olarak kopyalanmalı ve YNS_API_KEY ayarlanmalıdır
    • YNS_API_KEY, yönetim panelinden alınan API token’ıdır

Temalar ve genişletilebilirlik

  • Your Next Store, farklı mağaza kategorileri için 149 hazır tema sunar
  • Her tema; ana sayfa, hero, renk paleti ve bölüm yerleşimlerini tamamen yeniden tasarlar
  • Tüm temalar aynı core codebase üzerinde inşa edilir
  • Temalar theme-001 ile theme-149 arasındaki dallarda yer alır
  • Tema tek bir komutla değiştirilebilir
git checkout theme-016
  • Her tema dalı, main üzerine eklenmiş tek bir commit’ten oluşur ve commit mesajı temanın havasını açıklar
  • Tema listesinin tamamı şu komutla görülebilir
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • Tüm tema dalları, theme-001 … theme-149 biçiminde başa sıfır eklenmiş üç haneli kimlik kullanır
  • Temalar yalnızca görsel bileşenleri ve statik varlıkları değiştirir
    • Ürünler, sepet ve checkout değiştirilmez

Dokümantasyon ve katkı

  • Kodlama konvansiyonları ve PR kontrol listesi için CONTRIBUTING.md incelenebilir
  • Ürün içe aktarma, sepet yönetimi ve YNS üzerinde nasıl geliştirme yapılacağı API documentation içinde yer alır

İlgili okumalar

1 yorum

 
GN⁺ 2024-09-12
Hacker News yorumları

  • Stripe’a bağımlı bir şey kesinlikle yapmazdım gibi geliyor
    Dolandırıcılık ve chargeback yüzünden ödemenin zor bir mesele olduğunu kabul ediyorum ama Stripe’ın düzgün hesapları dondurup iletişimi fiilen yok sayma geçmişi çok kötü. Tahkimi de zorunlu kılıyor; hakem Stripe gelirine bağımlı ve şartlara göre dondurulan fonları yatırımda kullanmalarına bile izin veriyor. Toplu davaları da yasaklıyorlar; bu maddenin gerçekten ayakta kalıp kalmayacağını bilmiyorum

    • Alternatif olarak ne önerdiğini merak ediyorum

  • Artık gönderiyi düzenleyemiyorum ama YNS’in çalışma demosu burada: https://demo.yournextstore.com
    Stripe Link’i görmek için e-posta olarak test@test.com kullanın; etkinleşince 000000 girmeniz yeterli

  • Uzun zamandır tam olarak böyle bir şeyi birkaç kez yapmak istemiştim; iyi iş çıkarmışsınız
    Henüz ayrıntılı bakmadım ama dijital indirmeleri destekleyip desteklemediğini merak ediyorum. Dijital ürün indirmeleri ve “lead magnet” indirmeleri birçok mağaza için çok faydalı olabilir

    • Başta fiziksel ürünlere odaklandık ama dijital ürün özelliği eklemek aslında daha kolay olabilir
      İdeal bir çözümünüz varsa ya da kusursuz senaryoda nasıl çalışması gerektiğini anlatırsanız sevinirim. Hem dijital indirmeler hem de lead magnet indirmeleri için referans alabileceğimiz bir modele ihtiyacımız var

  • Demoda en sevdiğim özellik tek sayfalı ödeme oldu
    Shopify’ın mükemmel ödeme akışına çok yakın. WooCommerce’in Shopify’a gerçek bir self-hosted alternatif olması gerekiyor ama hâlâ eksikleri var; eklenti ekosistemi olsa bile iyi bir sepet ve ödeme deneyimi işletmek çok daha zor. Lansman için tebrikler

    • Tek sayfalı ödeme her zaman en büyük önceliklerimizden biriydi ve öyle kalacak
      Hâlâ küçük iyileştirmeler var ama mevcut ödeme deneyimi oldukça akıcı olduğu için memnunuz. Stripe Link ile de denediniz mi merak ediyorum. Önceki satın alma bilgileriniz internetin bir yerinde kayıtlıysa, form doldurmadan tüm ödeme 4 tıklamaya iniyor
    • WooCommerce’in kendisi backend olarak genel olarak fena değil ama temaların çoğu pek iyi değil
      Varsayılan ve ücretsiz temalar dahil düzenler çirkin, gereksiz yere ağır ve ödeme ekranı çok amatör görünüyor; bu da birçok kişiye dolandırıcılık sitesi hissi verebilir. İyi temalar da var ama epey para ödemeniz gerekiyor
    • Ürün eklerken tüm sepeti gösteren küçük bağlantı da hoş bir detay

  • Kargo ücreti hesaplamasını nasıl ele aldığınızı merak ediyorum
    Bu da Stripe’ın ürün kataloğu özelliğine dahil mi?

    • Bu özellik henüz hazır değil ama üzerinde aktif olarak çalışıyoruz
      Hemen kargo özelliğine ihtiyacınız varsa bunu üçüncü taraflara devredebilirsiniz; bazı partnerlerimiz bu şekilde özellik geliştiriyor. Uzun vadede Stripe ile daha derin entegre olup Stripe’ı e-ticaretin çekirdek altyapısı hâline getirmek istiyoruz
    • Bu veri birkaç üçüncü taraftan alınabilir
      Şahsen Shippo’yu tercih ediyorum; kurucularını da tanıyorum ve Weebly’ye, şimdiki Square’in içine entegre etmiştim

  • Veritabanı gerekmiyorsa stok yönetimi nasıl yapılıyor merak ediyorum
    Örneğin birkaç kişi aynı ürünü aynı anda almaya çalışırsa ve stok yetersizse ne oluyor?

    • Başta stok gibi verileri doğrudan Stripe’ın ürün metadatasında saklama yaklaşımıyla başladık
      Buna ek olarak her mağaza ile Stripe arasındaki senkronizasyonu, örneğin atomiklik gibi kısımları yöneten ince bir katman da geliştiriyoruz. Henüz ideal çözüm değil ama çoğu küçük mağaza için iyi çalışıyor ve daha da iyileştirmek için fikirlerimiz var. Bu tür durumlarda composable/headless yapı bazen gereksiz yük olabilir

  • Demoyu kullandım; başkalarının dediği gibi gerçekten iyi yapılmış ve hızlı
    Ancak sepette bir ürünü kaldırmak için miktarı 0 yaptığımda yenileme başlayıp arayüzün donduğu bir bug ile karşılaştım. Bunun bu davranıştan mı yoksa mevcut trafikten mi kaynaklandığını bilmiyorum ama bilginiz olsun

    • Bu bug’ı doğruladık, haber verdiğiniz için teşekkürler
      Son dönemde o kısmı birkaç kez yineleyerek iyileştirdik; bir şey gözden kaçmış gibi görünüyor

  • Epey akıcı ve Umami desteği hoşuma gitti
    Bunu tek seferde Dockerfile ile sarmalamak güzel olurdu ama kişisel kullanım için elle yapmak da zor görünmüyor. Abonelik dışında Stripe’ı bir süredir kullanmıyorum; kupon kodu veya indirim desteği ne kadar zor olur merak ediyorum. Destekleme planınız var mı?

    • Şu anda çeşitli şeyler deniyoruz; Umami ile başladık ama e-ticarete özel bir analitik alt özelliği kendimiz yapmayı da değerlendiriyoruz
      Kuponlar yol haritasında ve eklemesi de nispeten basit olacak gibi. Birlikte beta test etmek ister misiniz merak ediyorum. Dockerfile topluluk tarafından önerildi ve bugün incelemeyi planlıyoruz: https://github.com/yournextstore/yournextstore/pull/22/files

  • Demonun hızlı olmasının nedeni, fare imleci üzerine geldiğinde veya dokunulduğunda listeyi önceden getirmesi
    Geleneksel e-ticarette de mümkün bir yöntem ve kullanıcı verisini boşa harcayan bu kullanıcı deneyimini pek sevmiyorum. Önceden getirmeyi kapatma seçeneği var mı?

    • Elbette mümkün. Açık kaynak olmasının bir nedeni var; fork’layıp önceden getirmeyi devre dışı bırakabilirsiniz
      Yine de kullanıcı deneyimi açısından bunun en iyi seçenek olduğunu düşünmüyorum
    • next.js’te ayarlanabilen şeyler burada da geçerli gibi görünüyor
      Ama önceden getirmeyi global olarak kapatmanın bir yolu olmadığını öğrendim[0]. Her bağlantıda ayrı ayrı kapatmak ya da özel bir link bileşeni yapıp kullanmak gerekiyor
      [0] https://github.com/vercel/next.js/discussions/24437

  • Güzel. Tam da böyle bir şey arıyordum
    Ancak kurulum sırasında corepack install aşamasında pnpm@9.9.0 hash uyuşmazlığı hatası aldım. Beklenen hash ile gelen hash farklı olduğu için Internal Error: Mismatch hashes oluşuyor

    • pnpmi 9.10.0’a yükselttik, artık sorun yok
    • Öncelikle yapılandırmayı biraz daha incelemem gerekiyor
      Önce package.json içinden packageManager alanını tamamen kaldırıp tekrar deneyebilir misiniz? Mümkünse kısa bir görüntülü görüşmede yeniden üretme ortamını doğrudan görmek isterim. Şu anda bizim tarafta yeniden üretemiyoruz