您的下一个商店

👉 demo.yournextstore.com 👈

</div>

演示

https://github.com/user-attachments/assets/64197310-29bd-4dd3-a736-1494340e20e8

先决条件

Node.js 20+

我们官方支持当前的 LTS 版本 – 截至撰写时为 20。YNS 应该可以在 18、20 和 22 版本上运行。如果您使用这些版本之一并遇到问题，请报告！

安装 Node.js

按照此处找到的适用于您操作系统的说明进行操作：nodejs.org/en/download

pnpm 9+

我们官方支持 pnpm 9 版本，但我们会尽最大努力保持与 npm 和 yarn 的兼容性。

安装 pnpm

安装 pnpm 最简单的方法是通过 Node.js Corepack。在 YNS 所在文件夹内，运行以下命令：

corepack enable
corepack install

或者，按照此处找到的适用于您操作系统的说明进行操作：pnpm.io/installation

创建 Stripe 账户

YNS 与 Stripe 紧密集成，因此您需要一个 Stripe 账户才能使用 Your Next Store。按照 Stripe 的说明创建账户。

请记住，Stripe 有两种不同的工作模式：测试模式和生产模式。对于本地开发和测试目的，您应该使用测试模式。这样，Stripe 永远不会收取真实的钱，您可以使用特殊的测试凭证（如信用卡号码和 BLIK 号码）来完成支付。有关更详细的信息，请参阅 Stripe 文档：docs.stripe.com/testing。

当您准备好向真实客户销售产品时，您必须在 Stripe 中将测试模式切换到生产模式，并生成新的凭证。

[!提示] 这一步需要 Stripe 进行额外的验证，所以我们建议您立即开始这个过程。

添加环境变量

为了让 YNS 正常工作，您需要定义一些环境变量。对于本地开发和测试，您可以创建一个空的 .env 文件，并将 .env.example 的内容复制到其中。

要在生产环境中设置环境变量，您需要查阅所选托管提供商的文档。

必需的环境变量

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。

https://github.com/yournextstore/.github/assets/200613/01d27f69-00dc-446e-bc81-5dea2587f346

可选的环境变量

NEXT_PUBLIC_UMAMI_WEBSITE_ID – 用于分析的 Umami 网站 ID
NEXT_PUBLIC_NEWSLETTER_ENDPOINT – 预览：未来用于订阅表单的端点。它应接受带有 JSON { email: string } 的 POST 请求，并返回 JSON { status: number }。
STRIPE_WEBHOOK_SECRET – 预览：用于处理来自 Stripe 的事件的 Stripe Webhook 密钥。详见下文。
ENABLE_STRIPE_TAX – 预览：设置为任何值（如 1）以在 YNS 中启用 Stripe Tax。详见下文。
NEXT_PUBLIC_LANGUAGE - 商店的语言。

运行商店

完成上述步骤后，运行 pnpm install 安装所需依赖，然后运行 pnpm dev 在您的机器上启动开发服务器。Your Next Store 将在 localhost:3000 可用。

添加产品

Your Next Store 从 Stripe 获取所有产品、价格、描述和类别。因此，如果您已经熟悉 Stripe，您会感到非常熟悉！

您需要在 Stripe 仪表板中添加产品才能在 YNS 中显示。登录后，点击左侧边栏中的更多，然后选择产品目录。您也可以使用直接链接：

在测试模式下：dashboard.stripe.com/test/products
在生产模式下：dashboard.stripe.com/products

然后，点击添加产品并填写所有必需信息：

名称，
描述，
价格 – 目前仅支持一次性付款，
产品图片。

元数据

此外，Your Next Store 使用产品元数据来提供更多关于产品的上下文信息。您可以指定以下元数据字段：

字段	是否必需	描述
`slug`	是	产品 slug 用于 URL。除变体外，需要是唯一的。
`category`	否	用于分组产品的产品类别。
`order`	否	用于排序产品的产品顺序。较小的数字会先显示。
`variant`	否	产品变体 slug。详情请参见下文。
现在您应该可以在您的下一个商店中看到所有添加的产品。

变体

您的下一个商店支持简单的产品变体。要创建带有变体的产品，您必须在Stripe中添加多个具有相同slug元数据字段的产品。YNS使用variant元数据字段来区分同一产品的不同变体。例如，如果您有一件多种尺寸的T恤，您可以创建三个产品，slug为t-shirt，variant值分别为small、medium和large。

变体会显示在产品页面上。变体可以有不同的价格、描述和图片。需要注意的是，为了获得最佳的浏览体验，同一产品的所有变体的category应该相同。

[!注意] 未来，我们计划添加在内置管理仪表板中编辑产品和变体的功能。如果您有任何想法或建议，请告诉我们！

Stripe Webhooks

您的下一个商店使用Stripe Webhooks来处理来自Stripe的事件。目前，该端点用于自动重新验证购物车页面并创建税务交易（如果启用）。要设置Webhooks，请按照Stripe文档进行操作。具体步骤取决于您是否在Stripe账户中激活了Stripe Workbench：docs.stripe.com/webhooks#add-a-webhook-endpoint。

webhook的端点是https://{YOUR_DOMAIN}/api/stripe-webhook。唯一需要的事件是payment_intent.succeeded。在Stripe中配置webhook时，将STRIPE_WEBHOOK_SECRET环境变量设置为Stripe创建的密钥。