YourNextStore – Shopify open-source yang menggunakan Stripe sebagai backend

 (github.com/yournextstore)
1 poin oleh GN⁺ 2024-09-12 | 1 komentar | Bagikan ke WhatsApp
  • Your Next Store adalah template e-commerce Next.js AI-native open-source berbasis Stripe, yang mendukung self-hosting dan deployment sekali klik ke Vercel
  • Menyediakan AGENTS.md, pola Next.js App Router yang idiomatis, serta metode Commerce Kit SDK bertipe agar mudah ditangani oleh tool coding AI
  • Fitur inti mencakup checkout, billing, dan subscriptions melalui integrasi langsung Stripe API, dengan model domain produk, opsi, keranjang, dan pembayaran yang tertata sebagai type
  • Stack teknologinya terdiri dari Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript, dan Biome
  • Menyediakan 149 branch tema dari theme-001 hingga theme-149; tema hanya mengubah komponen visual dan aset statis, sementara produk, keranjang, dan pembayaran tetap dipertahankan

Gambaran proyek

  • Your Next Store adalah template e-commerce Next.js AI-native open-source
  • Dijalankan dengan Stripe dan dibuat dengan mempertimbangkan tool coding AI
  • Menyediakan demo live
  • Karakteristik yang ditekankan repositori ini adalah sebagai berikut
    • AI-Friendly Codebase: mencakup AGENTS.md, pola idiomatis, dan Commerce Kit SDK dengan metode bertipe
    • Stripe-Native: menangani checkout, billing, dan subscriptions melalui integrasi langsung Stripe API
    • Next.js 16: menggunakan App Router, React Server Components, dan React Compiler
    • Open Source: dapat di-self-host di mana saja dan di-deploy ke Vercel dengan sekali klik

Desain yang ramah tool coding AI

  • Menggunakan pola Next.js yang familiar agar tool AI bekerja lebih baik
    • Menggunakan susunan idiomatis seperti App Router, Server Components, Server Actions, dan "use cache"
  • Commerce Kit SDK memiliki bentuk input dan output yang didefinisikan untuk metode seperti productBrowse() dan cartUpsert()
    • README menjelaskan bahwa LLM menulis kode yang benar ketika memahami kontraknya
  • Model domain seperti produk, variants, keranjang, dan checkout sudah tersedia serta memiliki type yang jelas
    • LLM tidak perlu membuat ulang model tersebut
  • AGENTS.md berisi konteks proyek, contoh SDK, aturan Biome, dan checklist validasi
    • Tujuannya membantu agent AI memahami codebase sebelum menulis kode

Stack teknologi

  • Next.js 16

    • Menggunakan App Router, React Server Components, dan React Compiler

  • Bun

    • Digunakan sebagai runtime JavaScript dan package manager yang cepat

  • Commerce Kit SDK

    • Menangani integrasi headless commerce API

  • Tailwind CSS v4

    • Digunakan untuk styling utility-first

  • Shadcn UI

    • Menyediakan lebih dari 50 komponen aksesibel berbasis Radix UI

  • TypeScript

    • Digunakan untuk pengembangan dengan type safety yang ketat

  • Biome

    • Digunakan sebagai linter dan formatter yang cepat

Quick start dan persyaratan menjalankan

  • Perintah quick start mengikuti alur meng-clone repositori, menginstal dependency dengan Bun, lalu membuat file environment variable
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
  • Setelah dijalankan, store akan berjalan di localhost:3000
  • Persyaratannya adalah sebagai berikut
  • Anda harus menyalin .env.example menjadi .env.local dan mengatur YNS_API_KEY
    • YNS_API_KEY adalah token API yang diterbitkan dari panel admin

Tema dan ekstensi

  • Your Next Store menyediakan 149 ready-made themes untuk berbagai kategori store
  • Setiap tema sepenuhnya mendesain ulang homepage, hero, palet warna, dan layout section
  • Semua tema dibuat di atas core codebase yang sama
  • Tema berada pada branch dari theme-001 hingga theme-149
  • Tema dapat diganti dengan satu perintah
git checkout theme-016
  • Setiap branch tema adalah satu commit di atas main, dan pesan commit menjelaskan nuansa tema tersebut
  • Daftar lengkap tema dapat dilihat dengan perintah berikut
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • Semua branch tema menggunakan ID tiga digit berawalan nol seperti theme-001 … theme-149
  • Tema hanya memodifikasi komponen visual dan aset statis
    • Produk, keranjang, dan checkout tidak berubah

Dokumentasi dan kontribusi

  • Untuk konvensi coding dan checklist PR, lihat CONTRIBUTING.md
  • Cara mengambil produk, mengelola keranjang, dan membangun di atas YNS dapat dilihat di API documentation

Bacaan terkait

1 komentar

 
GN⁺ 2024-09-12
Komentar Hacker News

  • Rasanya saya tidak akan pernah membuat sesuatu yang bergantung pada Stripe
    Saya mengakui bahwa pembayaran memang masalah yang sulit karena penipuan dan chargeback, tetapi rekam jejak Stripe terlalu buruk: mereka membekukan akun yang sah dan praktis mengabaikan kontak. Mereka juga memaksakan arbitrase, arbitratornya bergantung pada pendapatan Stripe, dan dalam ketentuannya mereka bahkan bisa menginvestasikan dana yang dibekukan. Gugatan class action juga dilarang, meski saya tidak tahu apakah klausul ini benar-benar akan dipertahankan dalam praktik

    • Penasaran, alternatif apa yang Anda rekomendasikan?

  • Sekarang saya tidak bisa mengedit postingannya lagi, tetapi demo cara kerja YNS ada di sini: https://demo.yournextstore.com
    Untuk melihat Stripe Link, gunakan email test@test.com, lalu jika sudah aktif masukkan 000000

  • Sejak dulu saya sudah beberapa kali ingin membuat sesuatu yang persis seperti ini, dan ini dibuat dengan bagus
    Saya belum melihatnya secara detail, tetapi penasaran apakah mendukung unduhan digital. Unduhan produk digital dan unduhan “lead magnet” sepertinya akan sangat membantu banyak toko

    • Awalnya kami berfokus pada produk fisik, tetapi menambahkan fitur produk digital sepertinya justru akan lebih mudah
      Akan bagus jika Anda punya solusi ideal atau bisa memberi tahu bagaimana seharusnya ini bekerja dalam skenario sempurna. Kami butuh model referensi untuk unduhan digital maupun unduhan lead magnet

  • Fitur yang paling saya suka dari demo adalah checkout satu halaman
    Ini sangat mendekati alur checkout Shopify yang bagus. WooCommerce seharusnya menjadi alternatif self-hosted yang nyata untuk Shopify, tetapi masih kurang, dan meski ada ekosistem plugin, menjalankan keranjang dan checkout yang bagus jauh lebih sulit. Selamat atas peluncurannya

    • Checkout satu halaman selalu menjadi salah satu prioritas utama kami dan akan tetap begitu
      Masih ada beberapa perbaikan kecil, tetapi saya senang karena pengalaman checkout saat ini cukup mulus. Penasaran apakah Anda juga sudah mencobanya dengan Stripe Link. Jika informasi pembelian sebelumnya tersimpan di suatu tempat di internet, seluruh proses checkout bisa turun menjadi 4 klik tanpa mengisi formulir
    • WooCommerce sendiri sebagai backend secara umum cukup baik, tetapi sebagian besar temanya kurang bagus
      Termasuk tema bawaan dan gratis, layout-nya jelek, berat tanpa perlu, dan halaman checkout-nya terlihat terlalu amatir sehingga banyak orang bisa merasa itu seperti situs penipuan. Ada juga tema yang bagus, tetapi harus membayar cukup mahal
    • Tautan kecil yang menampilkan seluruh keranjang saat menambahkan produk juga detail yang bagus

  • Penasaran bagaimana perhitungan ongkos kirim ditangani
    Apakah ini juga termasuk dalam fitur katalog produk Stripe?

    • Fitur ini belum siap, tetapi sedang kami kerjakan secara aktif
      Jika butuh fitur pengiriman segera, bisa diserahkan ke pihak ketiga, dan beberapa partner sedang mengembangkan fitur dengan cara seperti itu. Dalam jangka panjang, kami ingin berintegrasi lebih dalam dengan Stripe dan menjadikan Stripe sebagai infrastruktur inti e-commerce
    • Data ini bisa didapat dari berbagai pihak ketiga
      Secara pribadi saya lebih suka Shippo, saya juga mengenal para pendirinya, dan pernah mengintegrasikannya ke Weebly, yang sekarang menjadi bagian dari Square

  • Jika tidak membutuhkan database, bagaimana manajemen stok dilakukan?
    Misalnya, jika beberapa orang mencoba membeli produk yang sama secara bersamaan sementara stok tidak cukup, apa yang terjadi?

    • Awalnya kami menyimpan data seperti stok langsung di metadata produk Stripe
      Kami juga sedang mengembangkan lapisan tipis yang mengelola sinkronisasi antara tiap toko dan Stripe, misalnya hal-hal seperti atomicity. Ini belum menjadi solusi ideal, tetapi bekerja dengan baik untuk sebagian besar toko kecil, dan kami juga punya ide untuk meningkatkannya. Dalam situasi seperti ini, konfigurasi composable/headless justru bisa terasa membebani

  • Setelah mencoba demonya, seperti kata orang lain, ini benar-benar dibuat dengan baik dan cepat
    Namun saat saya mencoba menghapus produk dari keranjang dengan membuat jumlahnya menjadi 0, saya menemukan bug: refresh dimulai dan antarmuka macet. Saya tidak tahu apakah ini karena perilaku tersebut atau karena trafik saat ini, tetapi semoga ini bisa menjadi masukan

    • Kami sudah mengonfirmasi bug tersebut, terima kasih sudah memberi tahu
      Belakangan ini kami beberapa kali mengiterasi bagian itu, sepertinya ada sesuatu yang lolos

  • Cukup mulus dan saya suka dukungan Umami
    Akan bagus jika semuanya bisa dibungkus sekaligus dengan Dockerfile, tetapi untuk penggunaan pribadi rasanya tidak sulit dilakukan sendiri. Sudah agak lama saya tidak memakai Stripe selain untuk fitur langganan, jadi penasaran seberapa sulit mendukung kode kupon atau sale. Apakah ada rencana untuk mendukungnya?

    • Saat ini kami sedang bereksperimen dengan beberapa hal; kami mulai dari Umami, tetapi juga sedang mempertimbangkan membuat subfitur analitik khusus e-commerce sendiri
      Kupon ada di roadmap dan sepertinya relatif mudah ditambahkan. Penasaran juga apakah Anda bersedia ikut beta test. Dockerfile sudah diusulkan oleh komunitas dan akan kami tinjau hari ini: https://github.com/yournextstore/yournextstore/pull/22/files

  • Demo terasa cepat karena daftar diprefetch saat kursor mouse berada di atasnya atau saat diketuk
    Cara ini juga memungkinkan di e-commerce tradisional, dan saya tidak suka pengalaman pengguna seperti ini yang memboroskan data pengguna. Apakah ada opsi untuk mematikan prefetch?

    • Tentu bisa. Ada alasan mengapa ini open source, jadi Anda bisa melakukan fork dan menonaktifkan prefetch
      Namun dari sisi pengalaman pengguna, menurut saya itu bukan pilihan terbaik
    • Sepertinya apa yang bisa dikonfigurasi di next.js juga berlaku di sini
      Tetapi ternyata tidak ada cara untuk mematikan prefetch secara global[0]. Harus dimatikan per tautan, atau menggunakan komponen tautan kustom
      [0] https://github.com/vercel/next.js/discussions/24437

  • Bagus. Kebetulan saya sedang mencari sesuatu seperti ini
    Namun saat instalasi, di corepack install terjadi error ketidakcocokan hash pnpm@9.9.0. Hash yang diharapkan dan hash yang diterima berbeda sehingga muncul Internal Error: Mismatch hashes

    • pnpm sudah dinaikkan ke 9.10.0 dan sekarang sudah oke
    • Sepertinya kami perlu memeriksa konfigurasi lebih dulu
      Bisa coba hapus sepenuhnya packageManager dari package.json terlebih dahulu lalu coba lagi? Kalau memungkinkan, saya ingin melakukan panggilan video singkat untuk melihat langsung lingkungan reproduksinya. Saat ini kami tidak bisa mereproduksinya di sisi kami