YourNextStore – Stripeをバックエンドに使うオープンソースのShopify

 (github.com/yournextstore)
1 ポイント 投稿者 GN⁺ 2024-09-12 | 1件のコメント | WhatsAppで共有
  • Your Next Storeは、StripeベースのオープンソースなAI-native Next.js eコマーステンプレートで、セルフホスティングとVercelへのワンクリックデプロイをサポートする
  • AIコーディングツールが扱いやすいように、AGENTS.md、慣用的なNext.js App Routerパターン、型定義されたCommerce Kit SDKメソッドをあわせて提供する
  • 中核機能は、Stripe APIの直接統合によるcheckout、billing、subscriptionsで、商品・オプション・カート・決済のドメインモデルが型で整理されている
  • 技術スタックは、Next.js 16、Bun、Commerce Kit SDK、Tailwind CSS v4、Shadcn UI、TypeScript、Biomeで構成される
  • theme-001からtheme-149まで149個のテーマブランチを提供し、テーマはビジュアルコンポーネントと静的アセットだけを変更し、商品・カート・決済は維持する

プロジェクト概要

  • Your Next StoreはオープンソースのAI-native Next.js eコマーステンプレートである
  • Stripeで動作し、AIコーディングツールを念頭に設計されている
  • ライブデモを提供している
  • リポジトリが強調する特徴は次のとおり
    • AI-Friendly Codebase: AGENTS.md、慣用的なパターン、型付きメソッドを備えたCommerce Kit SDKを含む
    • Stripe-Native: Stripe APIを直接統合し、checkout、billing、subscriptionsを扱う
    • Next.js 16: App Router、React Server Components、React Compilerを使用する
    • Open Source: どこにでもセルフホストでき、Vercelへワンクリックでデプロイできる

AIコーディングツールに親和的な設計

  • AIツールがよりうまく動作するように、馴染みのあるNext.jsパターンを採用している
    • App Router、Server Components、Server Actions、"use cache"のような慣用的な構成を使う
  • Commerce Kit SDKでは、productBrowse()やcartUpsert()のようなメソッドに入力・出力の形が定義されている
    • READMEでは、LLMが契約を理解していると正しいコードを書けると説明している
  • 商品、variants、カート、checkoutといったドメインモデルがすでに存在し、型が明確になっている
    • LLMがそれらのモデルを新たに作り出す必要がない
  • AGENTS.mdには、プロジェクトコンテキスト、SDKの例、Biomeのルール、検証チェックリストが含まれる
    • AIエージェントがコードを書く前にコードベースを理解できるようにするためのもの

技術スタック

  • Next.js 16

    • App Router、React Server Components、React Compilerを使用する

  • Bun

    • 高速なJavaScriptランタイム兼パッケージマネージャとして使われる

  • Commerce Kit SDK

    • Headless commerce API統合を担当する

  • Tailwind CSS v4

    • ユーティリティファーストなスタイリングに使われる

  • Shadcn UI

    • Radix UIベースのアクセシブルなコンポーネントを50個以上提供する

  • TypeScript

    • 厳格な型安全開発に使われる

  • Biome

    • 高速なリンター兼フォーマッタとして使われる

クイックスタートと実行条件

  • クイックスタートのコマンドは、リポジトリを複製し、Bunで依存関係をインストールしたあと、環境変数ファイルを作成する流れである
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
  • 実行後はlocalhost:3000でストアが動作する
  • 必要条件は次のとおり
  • .env.exampleを.env.localにコピーし、YNS_API_KEYを設定する必要がある
    • YNS_API_KEYは管理パネルで発行されるAPIトークンである

テーマと拡張

  • Your Next Storeは、異なるストアカテゴリ向けに149個のready-made themesを提供する
  • 各テーマは、ホームページ、hero、カラーパレット、セクションレイアウトを完全に再設計したもの
  • すべてのテーマは同じcore codebaseの上に作られている
  • テーマはtheme-001からtheme-149までのブランチにある
  • 単一のコマンドでテーマを切り替えられる
git checkout theme-016
  • 各テーマブランチはmainの上に載る単一コミットで、コミットメッセージがテーマの雰囲気を説明している
  • テーマ一覧は次のコマンドで確認できる
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • すべてのテーマブランチは、theme-001 … theme-149のように0埋めされた3桁IDを使っている
  • テーマはビジュアルコンポーネントと静的アセットだけを変更する
    • 商品、カート、checkoutは変更されない

ドキュメントと貢献

  • コーディング規約とPRチェックリストはCONTRIBUTING.mdを参照
  • 商品の取り込み、カート管理、YNS上での構築方法はAPI documentationで確認できる

関連記事

1件のコメント

 
GN⁺ 2024-09-12
Hacker News のコメント

  • Stripe に依存するものは絶対に作らないと思う
    詐欺やチャージバックのせいで決済が難しい問題なのは認めるけれど、Stripe は正当なアカウントを凍結し、連絡を事実上無視してきた過去があまりに悪い。仲裁も強制し、その仲裁人は Stripe の収益に依存していて、規約上は凍結した資金を投資することさえできるようにしている。集団訴訟も禁じているが、この条項が実際に維持されるかは分からない

    • 代替として何を勧めるのか気になる

  • もう投稿は編集できないが、YNS の動作デモはここにある: https://demo.yournextstore.com
    Stripe Link を見るにはメールアドレス test@test.com を使い、有効化されたら 000000 を入力すればよい

  • 以前からまさにこういうものを何度も作りたいと思っていたが、よくできている
    まだ詳しく見ていないが、デジタルダウンロードに対応しているのか気になる。デジタル商品のダウンロードや「リードマグネット」のダウンロードは、多くのストアに大きく役立ちそう

    • 最初は物理商品に集中していたが、デジタル商品機能を追加するのはむしろもっと簡単そう
      理想的な解決策があるなら、あるいは完璧なシナリオでどう動くべきかを教えてほしい。デジタルダウンロードとリードマグネットのダウンロードの両方について、参考にできるモデルが必要

  • デモで一番気に入った機能は 1ページ決済
    Shopify の優れた決済フローに非常に近い。WooCommerce は Shopify の実質的なセルフホスティング代替になるべきだが、まだ不足していて、プラグインエコシステムがあっても、良いカートと決済を運用するのははるかに難しい。リリースおめでとう

    • 1ページ決済はずっと最優先事項の一つだったし、今後もそうする予定
      まだ小さな改善点は残っているが、今の決済体験はかなりスムーズなので満足している。Stripe Link でも試したか気になる。過去の購入情報がインターネット上のどこかに保存されていれば、フォーム入力なしで決済全体が4クリックまで減る
    • WooCommerce 自体はバックエンドとしては概ね悪くないが、テーマの大半がいまいち
      デフォルトや無料テーマまで含めてレイアウトが不格好で、不必要に重く、決済画面はあまりに素人っぽく、多くの人が詐欺サイトのように感じかねない。良いテーマもあるが、かなりお金を払う必要がある
    • 商品を追加したときにカート全体を表示する小さなリンクも良いディテール

  • 送料計算はどう処理しているのか気になる
    これも Stripe の商品カタログ機能に含まれているのか？

    • この機能はまだ準備できていないが、積極的に作業中
      すぐに配送機能が必要ならサードパーティに任せることもでき、一部のパートナーがその方式で機能を開発中。長期的には Stripe とより深く統合し、Stripe をECの中核インフラにしたい
    • このデータは複数のサードパーティから取得できる
      個人的には Shippo が好みで、創業者たちも知っており、Weebly、現在の Square 内部に統合したことがある

  • データベースが不要なら、在庫管理はどうするのか気になる
    たとえば複数の人が同じ商品を同時に買おうとして、在庫が足りない場合はどうなるのか？

    • 最初は在庫のようなデータを Stripe の商品メタデータに直接保存する方法から始めた
      ここに各ストアと Stripe の間の同期、たとえば原子性のような部分を管理する薄いレイヤーも開発中。まだ理想的な解決策ではないが、ほとんどの小規模ストアではうまく動き、さらに改善するアイデアもある。こうした状況では、コンポーザブル／ヘッドレス構成のほうがかえって負担になることもある

  • デモを使ってみたが、他の人が言うように本当によくできていて速い
    ただし、カートから商品を削除しようとして数量を0にしたとき、リフレッシュが始まってインターフェースが固まるバグに遭遇した。この挙動のせいなのか現在のトラフィックのせいなのかは分からないが、参考までに

    • そのバグを確認した。知らせてくれてありがとう
      最近その部分を何度か反復改善したのだが、何かが漏れたようだ

  • かなりスムーズで、Umami 対応が気に入った
    これを Dockerfile で一発で包めるとよさそうだが、個人用途なら自分でやっても難しくなさそう。サブスクリプション機能以外で Stripe をしばらく使っていないのだが、クーポンコードやセール対応はどれくらい難しいのか気になる。対応予定はある？

    • 今いろいろ実験中で、Umami から始めたが、EC 専用の分析サブ機能を自前で作ることも検討中
      クーポンはロードマップにあり、追加も比較的簡単そう。一緒にベータテストする意向があるかも気になる。Dockerfile はコミュニティから提案されており、今日見てみる予定: https://github.com/yournextstore/yournextstore/pull/22/files

  • デモが速い理由は、マウスカーソルが乗ったりタップしたりしたときに一覧をプリフェッチしているから
    伝統的なECでも可能な方式で、ユーザーデータを無駄にするこういうユーザー体験はあまり好きではない。プリフェッチを切るオプションはある？

    • もちろん可能。オープンソースである理由があるので、フォークしてプリフェッチを無効化すればよい
      ただし、ユーザー体験を考えるならそれが最善だとは思わない
    • next.js で設定できるものは、ここにも適用されるようだ
      ただし、グローバルにプリフェッチを切る方法はないことが分かった[0]。個別リンクごとに切るか、カスタム Link コンポーネントを作って使う必要がある
      [0] https://github.com/vercel/next.js/discussions/24437

  • 良い。ちょうどこういうものを探していた
    ただしインストール中に corepack install で pnpm@9.9.0 のハッシュ不一致エラーが出た。期待したハッシュと受け取ったハッシュが異なり、Internal Error: Mismatch hashes が発生する

    • pnpm を 9.10.0 に上げたので、もう大丈夫
    • まず設定をもう少し調べる必要がありそう
      先に package.json から packageManager を完全に削除してから、もう一度試してもらえる？ 可能なら短いビデオ通話で再現環境を直接見たい。現時点ではこちらで再現できていない