yournextstore
1.0.0
demo.yournextstore.com？
現在のLTSバージョンを正式にサポートしています - 執筆時点で20。 YNSはバージョン18、20、および22で動作する必要があります。これらのバージョンのいずれかを使用して問題が発生した場合は、報告してください。
ここにあるオペレーティングシステムの指示に従ってください：nodejs.org/en/download
正式にPNPMバージョン9をサポートしていますが、NPMとYarnと互換性を保つために最善を尽くします。
PNPMをインストールする最も簡単な方法は、node.js corepack経由です。 YNSを使用してフォルダー内で、これらのコマンドを実行します。
corepack enable
corepack installまたは、ここにあるオペレーティングシステムの指示に従ってください：pnpm.io/installation
YNSはStripeとしっかりと統合されているため、次のストアを使用するにはStripeアカウントが必要です。 Stripeの指示に従ってアカウントを作成します。
Stripeは、テストモードと生産モードの2つの異なるモードで機能することを覚えておくことが重要です。現地の開発とテストのために、テストモードを使用する必要があります。これにより、Stripeは本物のお金を請求することはありません。クレジットカード番号やBlik番号などの特別なテスト資格情報を使用して、支払いを完了することができます。詳細については、docs.stripe.com/testingのストライプドキュメントを参照してください。
製品を実際の顧客に販売する準備ができたら、テストモードをStripeの生産モードに切り替えて、新しい資格情報を生成する必要があります。
ヒント
このステップでは、ストライプからの追加の確認が必要なため、すぐにプロセスを開始することをお勧めします。
YNSが機能するには、いくつかの環境変数を定義する必要があります。ローカルの開発とテストのために、空の.envファイルを作成して、 .env.exampleの内容をコピーできます。
生産のENV変数を設定するには、選択したホスティングプロバイダーのドキュメントを参照する必要があります。
ENABLE_EXPERIMENTAL_COREPACK - vercelのみ：corepackを有効にするために1に設定NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - Stripeからの公開可能キー。STRIPE_SECRET_KEY - stripeのシークレットキー。STRIPE_CURRENCY - これは、店舗の通貨を決定するために使用されます。現在、許可されている通貨のみが許可されており、3文字のISOコード（ usdなど）である必要があります。NEXT_PUBLIC_URL - トレーリングスラッシュなしでストアのアドレスをvercelでオプション、すなわち、 https://demo.yournextstore.com 。初めて構築するときは、有効なURL、つまりhttp://localhost:3000に設定する必要があります。NEXT_PUBLIC_UMAMI_WEBSITE_ID - 分析用のウマミWebサイトIDNEXT_PUBLIC_NEWSLETTER_ENDPOINT -プレビュー：将来のニュースレターフォームのエンドポイント。 json { email: string }を使用して投稿リクエストを受け入れ、json { status: number }を返す必要があります。STRIPE_WEBHOOK_SECRET -プレビュー：ストライプからイベントを処理するためのStripe webhook Secret。詳細をご覧ください。ENABLE_STRIPE_TAX -プレビュー：任意の値（IE、 1 ）に設定して、YNSでストライプ税を有効にします。詳細をご覧ください。NEXT_PUBLIC_LANGUAGEストアのロケール（つまり、 en-US ） 上記の手順に従った後、 pnpm installを実行して必要な依存関係をインストールし、 pnpm devを実行して開発サーバーをマシンで起動します。次の店はLocalHost：3000で入手できます
次のストアは、Stripeからすべての製品、価格、説明、カテゴリを取得します。それで、あなたがすでにストライプを知っているなら、あなたは家にいると感じるでしょう！
YNSに表示するために、Stripeダッシュボードに製品を追加する必要があります。ログインしたら、左側のサイドバーで詳細をクリックし、製品カタログを選択します。直接リンクを使用することもできます。
次に、 [製品の追加]をクリックして、必要なすべての情報を入力します。
さらに、次のストアでは、製品メタデータを使用して、製品に関するより多くのコンテキスト情報を提供します。次のメタデータフィールドを指定できます。
| 分野 | 必須 | 説明 |
|---|---|---|
slug | はい | 製品スラッグはURLに使用されます。バリアントを除いてユニークである必要があります。 |
category | いいえ | 製品のグループ化に使用される製品カテゴリ。 |
order | いいえ | 製品の並べ替えに使用される製品の注文。最初に低い数値が表示されます。 |
variant | いいえ | 製品バリアントスラッグ。詳細については、以下をご覧ください。 |
これで、次の店に追加されたすべての製品が表示されるはずです。
次の店は、シンプルな製品バリアントをサポートしています。バリアントを備えた製品を作成するには、同じslugデータフィールドを持つストライプに複数の製品を追加する必要があります。 YNSは、 variantメタデータフィールドを使用して、同じ製品の異なるバリアントを区別します。たとえば、複数のサイズのTシャツがある場合、 t-shirtのslugとsmall 、 medium 、 largeのvariant値を備えた3つの製品を作成できます。
バリアントは製品ページに表示されます。バリアントは、価格、説明、画像が異なる場合があります。最高のブラウジングエクスペリエンスのために、同じ製品のすべてのバリエーションでcategoryが同じである必要があることに注意することが重要です。
注記
将来的には、組み込みの管理者ダッシュボード内に製品やバリエーションを編集する可能性を追加する予定です。アイデアや提案がある場合は、お知らせください！
次のストアは、ストライプWebhooksを使用して、Stripeのイベントを処理します。現在、エンドポイントは、カートページを自動的に再調整し、税取引を作成するために使用されています（有効な場合）。 Webhooksをセットアップするには、Stripe Docsに従ってください。正確な手順は、StripeアカウントでStripe Workbenchをアクティブにしたかどうかによって異なります：docs.stripe.com/webhooks#d-a-webhook-endpoint。
Webhookのエンドポイントはhttps://{YOUR_DOMAIN}/api/stripe-webhookです。必要な唯一のイベントは、 payment_intent.succeededです。 WebhookがStripeで構成されている場合は、 STRIPE_WEBHOOK_SECRET環境変数をStripeによって作成されたシークレットキーに設定します。
注記
将来、ユーザーエクスペリエンスを向上させるために、Webhookにさらにイベントを追加する予定です。
次のストアには、Stripe Tax Supportのプレビューが付いています。それを有効にするには、 ENABLE_STRIPE_TAX環境変数を任意の値に設定します（つまり、 1 ）。
この機能が機能するには、Stripe Dashboard：dashboard.stripe.com/register/taxに税設定を設定する必要があります。有効になって構成された場合、税金は自動的に計算され、次のことに基づいて製品の総価格に追加されます。
警告
この機能はまだ初期段階であり、サポートされていないエッジケースがある可能性があります。私たちは積極的に取り組んでいるので、問題が発生したり、提案がある場合は、お知らせください！
Vercelに展開するには、次のボタンをクリックし、GitHubリポジトリと環境変数を設定し、 [展開]をクリックします。 ENABLE_EXPERIMENTAL_COREPACK変数を1に設定してください。
説明はまもなく登場します。
Dockerに展開するには、次の手順に従ってください。
pnpm run docker:buildを実行します。pnpm run docker:runでコンテナを起動できます。 YNSは毎日進化し、何を改善するかについてのフィードバックを積極的に求めています。ご質問や問題がある場合は、Discordサーバーでお気軽にご連絡ください。
structuredCloneを使用して、サーバーからクライアントコンポーネントにデータを渡すことがあります。なぜ？サーバーからクライアントに直接渡すことができます。 Stripe SDKのデータには、多くの場合、クラスインスタンスが含まれています。これを回避するために、 structuredCloneを使用してそれらを排除し、単純な古いオブジェクトをクライアントに渡します。
