yournextstore

您的下一個商店

demo.yournextstore.com？

演示

demo-yns.mp4

先決條件

Node.js 20+

我們正式支持當前的LTS版本 - 在撰寫本文時20。 YNS應該在版本18、20和22上工作。如果您使用其中一個版本並遇到問題，請報告！

安裝node.js

按照此處找到的操作系統說明：nodejs.org/en/download

PNPM 9+

我們正式支持PNPM版本9，但我們將盡最大努力使其與NPM和紗線保持兼容。

安裝PNPM

安裝PNPM的最簡單方法是通過Node.js CorePack。在帶有YNS的文件夾中，運行以下命令：

corepack enable
corepack install

另外，請按照此處找到的操作系統說明：pnpm.io/installation

創建條紋帳戶

YNS與Stripe緊密整合在一起，因此您需要一個Stripe帳戶才能使用下一個商店。按照條紋的說明創建一個帳戶。

重要的是要記住，條紋以兩種不同的模式起作用：測試模式和生產模式。為了進行本地開發和測試目的，您應該使用測試模式。這樣，條紋將永遠不會收取真實的錢，您可以使用特殊的測試憑據（例如信用卡號和BLIK號碼）來完成付款。有關更多詳細信息，請參閱docs.stripe.com/testing上的條紋文檔。

一旦您準備將產品出售給真實的客戶，就必須將測試模式切換到條紋的生產模式並生成新的憑據。

提示

此步驟將需要條紋的額外驗證，因此我們建議您立即開始該過程。

添加環境變量

要使YN工作，您需要定義一些環境變量。對於本地開發和測試，您可以創建一個空的.env文件，並將.env.example的內容複製到其中。

要在生產中設置ENV變量，您需要諮詢所選託管提供商的文檔。

所需的環境變量

• ENABLE_EXPERIMENTAL_COREPACK - 僅Vercel：設置為1啟用CorePack
• NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - 從Stripe中發布鍵。
• STRIPE_SECRET_KEY - Stripe的秘密鍵。
• STRIPE_CURRENCY - 用於確定商店的貨幣。目前，僅允許單個貨幣，它應該是三個字母的ISO代碼（例如， usd ）。
• NEXT_PUBLIC_URL -在Vercel上可選的商店地址，而無需https://demo.yournextstore.com斜線，即首次構建時，您應該將其設置為任何有效的URL，即http://localhost:3000 。

yns-setup-env-variables.mp4

可選環境變量

• NEXT_PUBLIC_UMAMI_WEBSITE_ID - 分析的Umami網站ID
• NEXT_PUBLIC_NEWSLETTER_ENDPOINT -預覽：將來的新聞通訊表單的端點。它應該接受JSON { email: string }並返回JSON { status: number }的發布請求。
• STRIPE_WEBHOOK_SECRET -預覽：Stripe Webhook秘密處理條紋的事件。在下面閱讀更多。
• ENABLE_STRIPE_TAX -預覽：設置為任何值（即1 ）以在YNS中啟用條紋稅。在下面閱讀更多。
• NEXT_PUBLIC_LANGUAGE商店的語言環境（即， en-US ）

運行商店

遵循上述步驟後，運行pnpm install以安裝所需的依賴項，然後運行pnpm dev以在計算機上啟動開發服務器。您的下一個商店將在Localhost上找到：3000

添加產品

您的下一家商店從Stripe中獲取所有產品，價格，描述和類別。因此，如果您已經知道條紋，您會感到賓至如歸！

您需要將產品添加到Stripe儀表板中以在YNS中顯示。登錄後，單擊左側欄中的更多內容，然後選擇“產品目錄” 。您也可以使用直接鏈接：

• 在測試模式：dashboard.stripe.com/test/products
• 在生產模式：dashboard.stripe.com/products

然後，單擊添加產品並填寫所有必需的信息：

• 姓名，
• 描述，
• 價格 - 目前，僅支持一次性付款，
• 產品圖像。

元數據

此外，您的下一家商店使用產品元數據來提供有關產品的更多上下文信息。您可以指定以下元數據字段：

場地	必需的	描述
slug	是的	產品slug用於URL。除了變體外，還需要是唯一的。
category	不	用於分組產品的產品類別。
order	不	用於分類產品的產品訂單。較低的數字首先顯示。
variant	不	產品變體sl。請閱讀下面的詳細信息。

現在，您應該在下一家商店中看到所有添加的產品。

變體

您的下一個商店支持簡單的產品變體。要創建具有變體的產品，您必須使用相同的slug Metadata字段添加多個產品。 YNS使用variant數據場來區分同一產品的不同變體。例如，如果您的T卹有多種尺寸，則可以創建三種產品，其中包含slug ， medium和large small t-shirt和variant值。

變體顯示在產品頁面上。變體可以具有不同的價格，描述和圖像。重要的是要注意，對於最佳瀏覽體驗，同一產品的所有變體的category應相同。

筆記

將來，我們計劃在內置管理儀表板中添加編輯產品和變體的可能性。如果您有任何想法或建議，請告訴我們！

Stripe Webhooks

您的下一個商店使用Stripe Webhooks處理條紋的事件。當前，端點用於自動重新驗證購物車頁面並創建稅收交易（如果啟用）。要設置Webhooks，請關注Stripe文檔。確切的步驟取決於您是否激活了Stripe Workbench在Stripe帳戶中：docs.stripe.com/webhooks#add-a-webhook-endpoint。

Webhook的終點是https://{YOUR_DOMAIN}/api/stripe-webhook 。唯一需要的事件是payment_intent.succeeded 。將Webhook配置為Stripe時，將STRIPE_WEBHOOK_SECRET環境變量設置為Stripe創建的秘密密鑰。

筆記

將來，我們計劃在Webhook中添加更多事件，以改善用戶體驗。

條紋稅

您的下一個商店附帶條紋稅支持的預覽。要啟用它，請將ENABLE_STRIPE_TAX環境變量設置為任何值（即1 ）。

為了使此功能正常工作，您必須在Stripe Dashboard：Dashboard.stripe.com/register/tax中設置稅收設置。啟用和配置時，將自動計算稅收，並根據以下方式添加到產品的總價格中：

• 產品定價 - 稅款可能是包容的或排他性的
• 產品稅法
• 客戶的地址
• 客戶的稅號

警告

此功能仍處於早期階段，並且可能不支持邊緣案例。我們正在積極地從事它，因此，如果您遇到任何問題或有任何建議，請告訴我們！

生產部署

動詞

要在Vercel上部署，請單擊以下按鈕，設置您的GitHub存儲庫和環境變量，然後單擊部署。確保將ENABLE_EXPERIMENTAL_COREPACK變量設置為1 。

您自己的VPS

描述即將到來。

Docker

要在Docker上部署，請執行以下步驟：

1. 將此存儲庫克隆到一個空文件夾中，並如下所述在存儲庫中創建.ENV文件。
2. 設置變量docker = 1英寸.env
3. 執行pnpm run docker:build 。
4. 之後，您可以使用pnpm run docker:run啟動容器。

就這樣

YNS每天都在演變，我們積極尋求有關改進的反饋。如果您有任何疑問或問題，請隨時在我們的Discord服務器上與我們聯繫。

常問問題

有時，您會使用structuredClone將數據從服務器傳遞到客戶端組件。為什麼？

只有某些類型的數據可以直接從服務器傳遞到客戶端。來自Stripe SDK的數據通常包含類實例。為了解決此問題，我們使用structuredClone來消除它們，並將普通的舊對像傳遞給客戶端。