YourNextStore – Shopify แบบโอเพนซอร์สที่ใช้ Stripe เป็นแบ็กเอนด์

 (github.com/yournextstore)
1 คะแนน โดย GN⁺ 2024-09-12 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • Your Next Store เป็นเทมเพลตอีคอมเมิร์ซ Next.js แบบโอเพนซอร์สที่เป็น AI-native และใช้ Stripe เป็นฐาน รองรับการโฮสต์เองและการดีพลอยขึ้น Vercel แบบคลิกเดียว
  • มาพร้อม AGENTS.md, แพตเทิร์น Next.js App Router ที่เป็นแนวทางปฏิบัติทั่วไป และเมธอด Commerce Kit SDK ที่กำหนด type ไว้ เพื่อให้เครื่องมือเขียนโค้ด AI จัดการได้ง่าย
  • ฟีเจอร์หลักคือ checkout, billing และ subscriptions ผ่านการผสานกับ Stripe API โดยตรง พร้อมจัดระเบียบ domain model ของสินค้า ตัวเลือก ตะกร้า และการชำระเงินด้วย type
  • สแต็กเทคโนโลยีประกอบด้วย Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript และ Biome
  • มี 149 theme branches ตั้งแต่ theme-001 ถึง theme-149 โดย theme จะเปลี่ยนเฉพาะคอมโพเนนต์ด้านภาพและ static assets ส่วนสินค้า ตะกร้า และการชำระเงินยังคงเดิม

ภาพรวมโปรเจกต์

  • Your Next Store เป็น เทมเพลตอีคอมเมิร์ซ Next.js แบบโอเพนซอร์สที่เป็น AI-native
  • ขับเคลื่อนด้วย Stripe และสร้างขึ้นโดยคำนึงถึงเครื่องมือเขียนโค้ด AI
  • มี ไลฟ์เดโม
  • จุดเด่นที่ repository เน้นมีดังนี้
    • AI-Friendly Codebase: มี AGENTS.md, แพตเทิร์นที่เป็นแนวทางปฏิบัติทั่วไป และ Commerce Kit SDK ที่มีเมธอดพร้อม type
    • Stripe-Native: ผสาน Stripe API โดยตรงเพื่อจัดการ checkout, billing และ subscriptions
    • Next.js 16: ใช้ App Router, React Server Components และ React Compiler
    • Open Source: โฮสต์เองได้ทุกที่ และดีพลอยขึ้น Vercel ได้ในคลิกเดียว

การออกแบบที่เป็นมิตรกับเครื่องมือเขียนโค้ด AI

  • ใช้ แพตเทิร์น Next.js ที่คุ้นเคย เพื่อให้เครื่องมือ AI ทำงานได้ดีขึ้น
    • ใช้องค์ประกอบตามแนวทางปฏิบัติทั่วไป เช่น App Router, Server Components, Server Actions และ "use cache"
  • Commerce Kit SDK มีการกำหนดรูปแบบ input/output สำหรับเมธอดอย่าง productBrowse() และ cartUpsert()
    • README อธิบายว่าเมื่อ LLM รู้สัญญา/API contract ก็จะเขียนโค้ดที่ถูกต้องได้
  • มี domain model เช่น products, variants, cart และ checkout อยู่แล้ว พร้อม type ที่ชัดเจน
    • LLM จึงไม่จำเป็นต้องสร้าง model เหล่านี้ขึ้นมาใหม่
  • AGENTS.md มีบริบทของโปรเจกต์ ตัวอย่าง SDK กฎของ Biome และ checklist สำหรับการตรวจสอบ
    • ใช้เพื่อช่วยให้ AI agent เข้าใจ codebase ก่อนเขียนโค้ด

สแต็กเทคโนโลยี

  • Next.js 16

    • ใช้ App Router, React Server Components และ React Compiler

  • Bun

    • ใช้เป็น JavaScript runtime และ package manager ที่รวดเร็ว

  • Commerce Kit SDK

    • รับผิดชอบการผสาน headless commerce API

  • Tailwind CSS v4

    • ใช้สำหรับการจัดสไตล์แบบ utility-first

  • Shadcn UI

    • มีคอมโพเนนต์ด้าน accessibility ที่ใช้ Radix UI เป็นฐานมากกว่า 50 รายการ

  • TypeScript

    • ใช้สำหรับการพัฒนาที่มีความปลอดภัยด้าน type อย่างเข้มงวด

  • Biome

    • ใช้เป็น linter และ formatter ที่รวดเร็ว

Quick Start และเงื่อนไขการรัน

  • คำสั่ง Quick Start เป็นขั้นตอนการ clone repository, ติดตั้ง dependencies ด้วย Bun แล้วสร้างไฟล์ environment variables
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
  • หลังรันแล้ว store จะทำงานที่ localhost:3000
  • ข้อกำหนดมีดังนี้
  • ต้องคัดลอก .env.example เป็น .env.local และตั้งค่า YNS_API_KEY
    • YNS_API_KEY คือ API token ที่ออกจากแผงผู้ดูแลระบบ

Theme และการขยาย

  • Your Next Store มี 149 ready-made themes สำหรับหมวดหมู่ร้านค้าที่แตกต่างกัน
  • แต่ละ theme เป็นการออกแบบหน้า homepage, hero, ชุดสี และ layout ของ section ใหม่ทั้งหมด
  • ทุก theme สร้างอยู่บน core codebase เดียวกัน
  • theme อยู่ใน branch ตั้งแต่ theme-001 ถึง theme-149
  • สามารถสลับ theme ได้ด้วยคำสั่งเดียว
git checkout theme-016
  • แต่ละ theme branch เป็น commit เดียวที่อยู่บน main และ commit message จะอธิบาย mood ของ theme
  • ตรวจสอบรายการ theme ทั้งหมดได้ด้วยคำสั่งต่อไปนี้
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • ทุก theme branch ใช้ ID 3 หลักที่เติมศูนย์นำหน้า เช่น theme-001 … theme-149
  • theme แก้ไขเฉพาะคอมโพเนนต์ด้านภาพและ static assets เท่านั้น
    • สินค้า ตะกร้า และ checkout ไม่เปลี่ยนแปลง

เอกสารและการมีส่วนร่วม

  • สำหรับ coding conventions และ PR checklist ให้ดู CONTRIBUTING.md
  • การนำเข้าสินค้า การจัดการตะกร้า และวิธีสร้างบน YNS ดูได้ใน API documentation

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-09-12
ความคิดเห็นบน Hacker News

  • คิดว่าคงไม่มีทางสร้างอะไรที่พึ่งพา Stripe เด็ดขาด
    ยอมรับว่าการชำระเงินเป็นเรื่องยากเพราะปัญหาฉ้อโกงและ chargeback แต่ Stripe มีประวัติแย่มากเรื่องการอายัดบัญชีปกติและแทบไม่ตอบการติดต่อ แถมยังบังคับใช้อนุญาโตตุลาการ โดยอนุญาโตตุลาการนั้นพึ่งพารายได้จาก Stripe และตามเงื่อนไขยังเปิดทางให้ Stripe นำเงินที่อายัดไว้ไปลงทุนได้ด้วย ยังห้ามการฟ้องแบบกลุ่มอีก ซึ่งไม่แน่ใจว่าข้อนี้จะบังคับใช้ได้จริงหรือไม่

    • อยากรู้ว่าแนะนำทางเลือกอะไรบ้าง

  • ตอนนี้แก้โพสต์ไม่ได้แล้ว แต่เดโมการทำงานของ YNS อยู่ที่นี่: https://demo.yournextstore.com
    ถ้าต้องการดู Stripe Link ให้ใช้อีเมล test@test.com แล้วเมื่อเปิดใช้งานให้กรอก 000000

  • เคยอยากทำของแบบนี้เป๊ะ ๆ หลายครั้งมานานแล้ว ทำออกมาได้ดีมาก
    ยังไม่ได้ดูละเอียด แต่สงสัยว่ารองรับ การดาวน์โหลดดิจิทัล ไหม การดาวน์โหลดสินค้าดิจิทัลและดาวน์โหลด “lead magnet” น่าจะช่วยร้านจำนวนมากได้มาก

    • ตอนแรกโฟกัสที่สินค้าจริงก่อน แต่การเพิ่ม ฟีเจอร์สินค้าดิจิทัล น่าจะง่ายกว่าด้วยซ้ำ
      ถ้ามีแนวทางที่คิดว่าเหมาะที่สุด หรืออยากอธิบายว่าในสถานการณ์สมบูรณ์แบบควรทำงานอย่างไร ก็อยากฟัง ต้องการโมเดลอ้างอิงทั้งสำหรับการดาวน์โหลดดิจิทัลและการดาวน์โหลด lead magnet

  • ฟีเจอร์ที่ชอบที่สุดในเดโมคือ การชำระเงินหน้าเดียว
    ใกล้เคียงกับ flow การชำระเงินที่ยอดเยี่ยมของ Shopify มาก WooCommerce ควรเป็นทางเลือกแบบ self-hosted ที่แท้จริงของ Shopify แต่ยังไม่ถึงขั้นนั้น และแม้จะมี ecosystem ปลั๊กอิน การทำตะกร้าสินค้าและหน้าชำระเงินที่ดีก็ยังยากกว่ามาก ยินดีด้วยกับการเปิดตัว

    • การชำระเงินหน้าเดียว เป็นหนึ่งในลำดับความสำคัญสูงสุดมาตลอด และจะยังเป็นแบบนั้นต่อไป
      ยังมีจุดเล็ก ๆ ให้ปรับปรุงอยู่ แต่ตอนนี้พอใจกับประสบการณ์ชำระเงินที่ค่อนข้างลื่นไหลแล้ว อยากรู้ว่าได้ลองใช้กับ Stripe Link ด้วยหรือยัง ถ้าข้อมูลการซื้อก่อนหน้าถูกเก็บไว้ที่ไหนสักแห่งบนอินเทอร์เน็ต การชำระเงินทั้งหมดจะลดเหลือแค่ 4 คลิกโดยไม่ต้องกรอกฟอร์ม
    • ตัว WooCommerce เองโดยรวมถือว่าใช้เป็น แบ็กเอนด์ ได้โอเค แต่ธีมส่วนใหญ่ไม่ค่อยดี
      รวมถึงธีมพื้นฐานและธีมฟรี เลย์เอาต์ดูไม่สวย หนักโดยไม่จำเป็น และหน้าชำระเงินก็ดูสมัครเล่นเกินไปจนหลายคนอาจรู้สึกเหมือนเป็นเว็บหลอกลวง ธีมดี ๆ ก็มี แต่ต้องจ่ายค่อนข้างแพง
    • ลิงก์เล็ก ๆ ที่แสดงตะกร้าสินค้าทั้งหมดตอนเพิ่มสินค้าก็เป็นรายละเอียดที่ดี

  • อยากรู้ว่าจัดการ การคำนวณค่าจัดส่ง อย่างไร
    นี่รวมอยู่ในฟีเจอร์แค็ตตาล็อกสินค้าของ Stripe ด้วยหรือเปล่า?

    • ฟีเจอร์นี้ยังไม่พร้อม แต่กำลังทำงานอย่างจริงจัง
      ถ้าต้องการฟีเจอร์จัดส่งทันที ก็ให้ third-party จัดการได้ และพาร์ตเนอร์บางรายกำลังพัฒนาฟีเจอร์ด้วยวิธีนั้นอยู่ ระยะยาวอยากผสานกับ Stripe ให้ลึกขึ้น เพื่อให้ Stripe กลายเป็นโครงสร้างพื้นฐานหลักของอีคอมเมิร์ซ
    • ข้อมูลนี้รับได้จาก third-party หลายราย
      ส่วนตัวชอบ Shippo และรู้จักผู้ก่อตั้งด้วย เคยผสานเข้าไปใน Weebly ซึ่งปัจจุบันคือภายใน Square

  • ถ้าไม่ต้องมีฐานข้อมูล อยากรู้ว่า การจัดการสต็อก ทำอย่างไร
    เช่น ถ้าหลายคนพยายามซื้อสินค้าชิ้นเดียวกันพร้อมกัน แต่สต็อกไม่พอ จะเกิดอะไรขึ้น?

    • ตอนแรกเริ่มจากการเก็บข้อมูลอย่างสต็อกไว้ตรง เมทาดาทาของสินค้า ใน Stripe
      กำลังพัฒนาเลเยอร์บาง ๆ เพื่อจัดการการซิงก์ระหว่างแต่ละร้านกับ Stripe เช่นเรื่อง atomicity ด้วย ยังไม่ใช่ทางออกในอุดมคติ แต่ทำงานได้ดีสำหรับร้านเล็ก ๆ ส่วนใหญ่ และมีไอเดียจะปรับปรุงต่อ ในสถานการณ์แบบนี้ สถาปัตยกรรมแบบ composable/headless อาจกลายเป็นภาระมากกว่า

  • ลองใช้เดโมแล้ว อย่างที่คนอื่นพูดกัน มันทำมาดีและเร็วมากจริง ๆ
    แต่เจอ บั๊ก ตอนพยายามเอาสินค้าออกจากตะกร้าโดยปรับจำนวนเป็น 0 จากนั้นเริ่มรีเฟรชและอินเทอร์เฟซค้าง ไม่แน่ใจว่าเป็นเพราะพฤติกรรมนี้หรือเพราะทราฟฟิกตอนนี้ แต่แจ้งไว้เผื่อช่วยได้

    • ยืนยันบั๊กนั้นแล้ว ขอบคุณที่แจ้ง
      ช่วงนี้ปรับปรุงส่วนนั้นซ้ำไปมาหลายรอบ ดูเหมือนมีอะไรหลุดไป

  • ค่อนข้างลื่นไหล และชอบที่รองรับ Umami
    ถ้าห่อทั้งหมดเป็น Dockerfile เดียวได้ก็คงดี แต่สำหรับใช้งานส่วนตัวน่าจะทำเองได้ไม่ยาก ไม่ได้ใช้ Stripe นอกจากฟีเจอร์ subscription มาพักหนึ่งแล้ว สงสัยว่าการรองรับโค้ดคูปองหรือโปรโมชันลดราคาจะยากแค่ไหน มีแผนรองรับไหม?

    • ตอนนี้กำลังทดลองหลายอย่าง เริ่มจาก Umami แต่ก็กำลังพิจารณาทำ ฟีเจอร์ย่อยด้าน analytics สำหรับอีคอมเมิร์ซโดยเฉพาะเองด้วย
      คูปองอยู่ใน roadmap และน่าจะเพิ่มได้ค่อนข้างง่าย อยากรู้ด้วยว่าสนใจช่วย beta test ไหม Dockerfile มีคนในชุมชนเสนอมา และจะลองตรวจดูวันนี้: https://github.com/yournextstore/yournextstore/pull/22/files

  • เดโมเร็วเพราะมีการ prefetch รายการเมื่อเอาเคอร์เซอร์เมาส์ไปวางหรือแตะ
    เป็นวิธีที่ทำได้ในอีคอมเมิร์ซแบบดั้งเดิมอยู่แล้ว และประสบการณ์ผู้ใช้แบบนี้ที่เปลืองข้อมูลผู้ใช้ไม่ค่อยดี มีตัวเลือกปิด prefetch ไหม?

    • แน่นอนว่าทำได้ ที่เป็นโอเพนซอร์สก็เพราะแบบนี้ แค่ fork แล้วปิด prefetch ก็ได้
      แต่ถ้าคิดถึงประสบการณ์ผู้ใช้ ผมไม่คิดว่านั่นเป็นทางเลือกที่ดีที่สุด
    • สิ่งที่ตั้งค่าได้ใน next.js ก็ดูเหมือนจะใช้กับที่นี่ได้เหมือนกัน
      แต่เพิ่งรู้ว่าไม่มีวิธีปิด prefetch แบบ global[0] ต้องปิดทีละลิงก์ หรือสร้างคอมโพเนนต์ลิงก์แบบ custom มาใช้
      [0] https://github.com/vercel/next.js/discussions/24437

  • ดีเลย กำลังมองหาอะไรแบบนี้พอดี
    แต่ตอนติดตั้งเจอข้อผิดพลาด แฮชของ pnpm@9.9.0 ไม่ตรงกัน ที่ corepack install แฮชที่คาดหวังกับแฮชที่ได้รับต่างกัน จึงเกิด Internal Error: Mismatch hashes

    • อัป pnpm เป็น 9.10.0 แล้ว ตอนนี้น่าจะโอเค
    • คงต้องดูการตั้งค่าเพิ่มเติมก่อน
      ลองลบ packageManager ออกจาก package.json ให้หมดก่อนแล้วลองใหม่ได้ไหม? ถ้าเป็นไปได้ อยากวิดีโอคอลสั้น ๆ เพื่อดูสภาพแวดล้อมที่ทำให้เกิดปัญหาโดยตรง ตอนนี้ฝั่งนี้ยัง reproduce ไม่ได้