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来消除它们，并将普通的旧对象传递给客户端。