YourNextStore – Shopify mã nguồn mở dùng Stripe làm backend

 (github.com/yournextstore)
1 điểm bởi GN⁺ 2024-09-12 | 1 bình luận | Chia sẻ qua WhatsApp
  • Your Next Store là mẫu thương mại điện tử Next.js AI-native mã nguồn mở dựa trên Stripe, hỗ trợ tự host và triển khai one-click trên Vercel
  • Dự án cung cấp AGENTS.md, các pattern Next.js App Router chuẩn mực và các phương thức Commerce Kit SDK có định nghĩa kiểu để công cụ lập trình AI dễ làm việc hơn
  • Các tính năng cốt lõi là checkout, billing và subscriptions thông qua tích hợp trực tiếp Stripe API; các mô hình miền cho sản phẩm, tùy chọn, giỏ hàng và thanh toán đã được chuẩn hóa bằng kiểu
  • Stack công nghệ gồm Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript và Biome
  • Dự án cung cấp 149 nhánh theme từ theme-001 đến theme-149; theme chỉ thay đổi thành phần giao diện và tài sản tĩnh, còn sản phẩm, giỏ hàng và thanh toán vẫn được giữ nguyên

Tổng quan dự án

  • Your Next Store là một mẫu thương mại điện tử Next.js AI-native mã nguồn mở
  • Dự án chạy trên Stripe và được xây dựng với công cụ lập trình AI trong đầu
  • Có bản demo trực tiếp
  • Các điểm nổi bật mà kho mã nhấn mạnh gồm:
    • AI-Friendly Codebase: bao gồm AGENTS.md, các pattern chuẩn mực và Commerce Kit SDK với các phương thức có kiểu
    • Stripe-Native: tích hợp trực tiếp Stripe API để xử lý checkout, billing và subscriptions
    • Next.js 16: sử dụng App Router, React Server Components và React Compiler
    • Open Source: có thể tự host ở bất kỳ đâu và triển khai one-click lên Vercel

Thiết kế thân thiện với công cụ lập trình AI

  • Dự án sử dụng các pattern Next.js quen thuộc để công cụ AI hoạt động tốt hơn
    • Dùng các cấu trúc chuẩn như App Router, Server Components, Server Actions và "use cache"
  • Commerce Kit SDK có định nghĩa hình dạng đầu vào và đầu ra cho các phương thức như productBrowse() và cartUpsert()
    • README giải thích rằng LLM sẽ viết đúng mã khi biết rõ contract
  • Các mô hình miền như sản phẩm, variants, giỏ hàng và checkout đã tồn tại sẵn và có kiểu rõ ràng
    • LLM không cần tự tạo lại các mô hình đó
  • AGENTS.md chứa ngữ cảnh dự án, ví dụ SDK, quy tắc Biome và checklist xác minh
    • Mục đích là giúp AI agent hiểu codebase trước khi viết mã

Stack công nghệ

  • Next.js 16

    • Sử dụng App Router, React Server Components và React Compiler

  • Bun

    • Được dùng làm JavaScript runtime và package manager tốc độ cao

  • Commerce Kit SDK

    • Phụ trách tích hợp headless commerce API

  • Tailwind CSS v4

    • Được dùng cho phong cách utility-first

  • Shadcn UI

    • Cung cấp hơn 50 component hỗ trợ accessibility dựa trên Radix UI

  • TypeScript

    • Được dùng cho phát triển an toàn kiểu nghiêm ngặt

  • Biome

    • Được dùng làm linter và formatter tốc độ cao

Bắt đầu nhanh và điều kiện chạy

  • Các lệnh bắt đầu nhanh theo quy trình clone kho mã, cài dependency bằng Bun rồi tạo file biến môi trường
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
  • Sau khi chạy, store sẽ hoạt động tại localhost:3000
  • Các yêu cầu cần có gồm:
  • Cần sao chép .env.example thành .env.local và thiết lập YNS_API_KEY
    • YNS_API_KEY là API token được cấp trong bảng điều khiển quản trị

Theme và mở rộng

  • Your Next Store cung cấp 149 theme dựng sẵn cho các danh mục cửa hàng khác nhau
  • Mỗi theme được thiết kế lại hoàn toàn phần trang chủ, hero, bảng màu và bố cục các section
  • Tất cả theme đều được xây dựng trên cùng một core codebase
  • Các theme nằm trong các nhánh từ theme-001 đến theme-149
  • Có thể chuyển theme bằng một lệnh duy nhất
git checkout theme-016
  • Mỗi nhánh theme là một commit duy nhất đặt trên main, và message của commit mô tả không khí của theme
  • Có thể xem toàn bộ danh sách theme bằng lệnh sau
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • Tất cả nhánh theme dùng ID ba chữ số có thêm số 0 ở đầu như theme-001 … theme-149
  • Theme chỉ chỉnh sửa các component giao diện và tài sản tĩnh
    • Sản phẩm, giỏ hàng và checkout không thay đổi

Tài liệu và đóng góp

  • Có thể tham khảo CONTRIBUTING.md để xem quy ước lập trình và checklist PR
  • Việc nhập sản phẩm, quản lý giỏ hàng và cách xây dựng trên YNS có thể xem trong API documentation

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-09-12
Ý kiến trên Hacker News

  • Chắc chắn tôi sẽ không bao giờ xây thứ gì phụ thuộc vào Stripe
    Tôi thừa nhận thanh toán là vấn đề khó vì gian lận và chargeback, nhưng Stripe có tiền sử quá tệ trong việc đóng băng các tài khoản hợp lệ và gần như phớt lờ liên hệ. Họ cũng ép trọng tài, trọng tài viên đó phụ thuộc vào doanh thu của Stripe, và điều khoản còn cho phép họ đầu tư khoản tiền bị đóng băng. Họ cũng cấm kiện tập thể, dù tôi không biết điều khoản này có thật sự đứng vững được không

    • Tò mò là bạn khuyên dùng giải pháp thay thế nào

  • Giờ không sửa bài đăng được nữa, nhưng demo hoạt động của YNS ở đây: https://demo.yournextstore.com
    Để xem Stripe Link, hãy dùng email test@test.com, rồi khi được kích hoạt thì nhập 000000

  • Từ lâu tôi đã muốn làm chính xác thứ như thế này nhiều lần rồi, làm tốt lắm
    Tôi chưa xem kỹ, nhưng tò mò không biết có hỗ trợ tải xuống kỹ thuật số không. Tải xuống sản phẩm số và tải xuống kiểu “lead magnet” có lẽ sẽ giúp ích rất nhiều cho nhiều cửa hàng

    • Ban đầu chúng tôi tập trung vào sản phẩm vật lý, nhưng việc thêm tính năng sản phẩm số có lẽ lại còn dễ hơn
      Nếu bạn có giải pháp lý tưởng hoặc có thể cho biết trong kịch bản hoàn hảo thì nó nên hoạt động như thế nào, tôi rất muốn nghe. Chúng tôi cần mô hình tham khảo cho cả tải xuống kỹ thuật số lẫn tải xuống lead magnet

  • Tính năng tôi thích nhất trong demo là thanh toán một trang
    Nó rất gần với luồng thanh toán tuyệt vời của Shopify. WooCommerce lẽ ra phải đóng vai trò là giải pháp tự host thực tế thay thế Shopify, nhưng vẫn còn thiếu sót; dù có hệ sinh thái plugin, việc vận hành giỏ hàng và thanh toán tốt vẫn khó hơn nhiều. Chúc mừng ra mắt

    • Thanh toán một trang đã và sẽ tiếp tục là một trong những ưu tiên hàng đầu
      Vẫn còn vài điểm nhỏ cần cải thiện, nhưng hiện trải nghiệm thanh toán khá mượt nên tôi hài lòng. Không biết bạn đã thử với Stripe Link chưa. Nếu thông tin mua hàng trước đó được lưu ở đâu đó trên internet, toàn bộ quy trình thanh toán giảm xuống còn 4 cú nhấp mà không cần nhập form
    • Bản thân WooCommerce nhìn chung khá ổn ở vai trò backend, nhưng phần lớn theme thì khá tệ
      Kể cả các theme mặc định/miễn phí, layout xấu, nặng không cần thiết, và màn hình thanh toán trông quá nghiệp dư nên nhiều người có thể cảm thấy như trang lừa đảo. Cũng có theme tốt, nhưng phải trả kha khá tiền
    • Liên kết nhỏ hiển thị toàn bộ giỏ hàng khi thêm sản phẩm cũng là một chi tiết hay

  • Tôi tò mò tính phí vận chuyển được xử lý thế nào
    Cái này cũng nằm trong tính năng danh mục sản phẩm của Stripe à?

    • Tính năng này chưa sẵn sàng, nhưng chúng tôi đang tích cực phát triển
      Nếu cần chức năng vận chuyển ngay, có thể giao cho bên thứ ba xử lý, và một số đối tác đang phát triển tính năng theo cách đó. Về dài hạn, chúng tôi muốn tích hợp sâu hơn với Stripe để biến Stripe thành hạ tầng cốt lõi cho thương mại điện tử
    • Dữ liệu này có thể lấy từ nhiều bên thứ ba
      Cá nhân tôi thích Shippo, cũng quen các nhà sáng lập, và từng tích hợp nó vào Weebly, nay là bên trong Square

  • Nếu không cần cơ sở dữ liệu thì quản lý tồn kho làm thế nào?
    Ví dụ nếu nhiều người cùng lúc muốn mua cùng một sản phẩm nhưng hàng tồn không đủ thì sao?

    • Ban đầu chúng tôi bắt đầu bằng cách lưu trực tiếp dữ liệu như tồn kho vào metadata sản phẩm của Stripe
      Chúng tôi cũng đang phát triển một lớp mỏng để quản lý việc đồng bộ giữa từng cửa hàng và Stripe, ví dụ như các phần liên quan đến tính nguyên tử. Đây chưa phải giải pháp lý tưởng, nhưng hoạt động tốt với hầu hết các cửa hàng nhỏ, và chúng tôi cũng có ý tưởng để cải thiện thêm. Trong tình huống này, cấu hình kiểu composable/headless có thể lại trở thành gánh nặng

  • Tôi thử demo rồi, đúng như mọi người nói, nó được làm rất tốt và nhanh
    Tuy nhiên tôi gặp một lỗi: khi đặt số lượng về 0 để xóa sản phẩm khỏi giỏ hàng, trang bắt đầu refresh và giao diện bị treo. Không rõ là do hành vi này hay do lưu lượng hiện tại, nhưng báo để bạn tham khảo

    • Chúng tôi đã xác nhận lỗi đó, cảm ơn đã báo
      Gần đây chúng tôi đã lặp lại và cải thiện phần đó vài lần, có vẻ có gì đó bị lọt

  • Khá mượt và tôi thích hỗ trợ Umami
    Sẽ tốt nếu gói gọn một lần bằng Dockerfile, nhưng với mục đích cá nhân thì tự làm cũng có vẻ không khó. Tôi đã lâu không dùng Stripe ngoài tính năng subscription, nên tò mò hỗ trợ mã coupon hoặc sale sẽ khó đến mức nào. Có kế hoạch hỗ trợ không?

    • Hiện chúng tôi đang thử nghiệm nhiều thứ, bắt đầu từ Umami, nhưng cũng đang cân nhắc tự làm tính năng phân tích dành riêng cho thương mại điện tử
      Coupon có trong roadmap và có vẻ cũng tương đối đơn giản để thêm. Không biết bạn có muốn cùng beta test không. Dockerfile đã được cộng đồng đề xuất và hôm nay tôi định xem xét: https://github.com/yournextstore/yournextstore/pull/22/files

  • Lý do demo nhanh là vì nó prefetch danh sách khi rê con trỏ chuột lên hoặc khi chạm
    Đây là cách cũng có thể làm trong thương mại điện tử truyền thống, và tôi không thích kiểu trải nghiệm người dùng lãng phí dữ liệu người dùng như vậy. Có tùy chọn tắt prefetch không?

    • Tất nhiên là có. Đây là open source là có lý do, nên bạn có thể fork và vô hiệu hóa prefetch
      Nhưng nếu xét về trải nghiệm người dùng, tôi không nghĩ đó là lựa chọn tốt nhất
    • Có vẻ những gì cấu hình được trong next.js cũng áp dụng ở đây
      Nhưng tôi mới biết là không có cách tắt prefetch toàn cục[0]. Phải tắt cho từng liên kết, hoặc tạo component liên kết tùy chỉnh để dùng
      [0] https://github.com/vercel/next.js/discussions/24437

  • Hay đấy. Đúng lúc tôi đang tìm thứ như thế này
    Tuy nhiên trong lúc cài đặt, ở corepack install tôi gặp lỗi hash không khớp với pnpm@9.9.0. Hash mong đợi và hash nhận được khác nhau nên phát sinh Internal Error: Mismatch hashes

    • Chúng tôi đã nâng pnpm lên 9.10.0 và giờ ổn rồi
    • Trước hết có lẽ tôi cần tìm hiểu thêm về cấu hình
      Bạn có thể thử xóa hoàn toàn packageManager khỏi package.json rồi thử lại trước không? Nếu được, tôi muốn gọi video ngắn để trực tiếp xem môi trường tái hiện lỗi. Hiện phía tôi chưa tái hiện được