{"id":14041506,"url":"https://github.com/yournextstore/yournextstore","last_synced_at":"2025-05-13T19:02:51.578Z","repository":{"id":251821529,"uuid":"838508060","full_name":"yournextstore/yournextstore","owner":"yournextstore","description":"Your Next Store: Modern Commerce with Next.js and Stripe as the backend.","archived":false,"fork":false,"pushed_at":"2025-04-16T08:31:36.000Z","size":3531,"stargazers_count":4957,"open_issues_count":22,"forks_count":557,"subscribers_count":39,"default_branch":"main","last_synced_at":"2025-04-28T00:01:48.675Z","etag":null,"topics":["commerce","hacktoberfest","nextjs","reactjs","stripe","typescript"],"latest_commit_sha":null,"homepage":"https://demo.yournextstore.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yournextstore.png","metadata":{"files":{"readme":"README-zh-cn.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE-AGPL.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-08-05T19:31:52.000Z","updated_at":"2025-04-27T04:48:59.000Z","dependencies_parsed_at":"2024-09-16T16:25:30.390Z","dependency_job_id":"2e428e89-22a2-4c8d-9620-06297af3df18","html_url":"https://github.com/yournextstore/yournextstore","commit_stats":null,"previous_names":["yournextstore/yournextstore"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yournextstore%2Fyournextstore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yournextstore%2Fyournextstore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yournextstore%2Fyournextstore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yournextstore%2Fyournextstore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yournextstore","download_url":"https://codeload.github.com/yournextstore/yournextstore/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254010792,"owners_count":21998993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["commerce","hacktoberfest","nextjs","reactjs","stripe","typescript"],"created_at":"2024-08-12T07:01:22.943Z","updated_at":"2025-05-13T19:02:51.555Z","avatar_url":"https://github.com/yournextstore.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","MDX","E Commerce","nextjs"],"sub_categories":[],"readme":"# Your Next Store\n\n\u003cdiv align=\"center\"\u003e\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e\n\t\u003ca href=\"https://yournextstore.com/discord\"\u003e\u003cimg src=\"https://img.shields.io/discord/1206629600483082341?style=for-the-badge\u0026logo=discord\u0026logoColor=white\u0026labelColor=%235865F2\u0026color=%23555\" alt=\"Join Discord\" /\u003e\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\t\u003ca href=\"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fyournextstore%2Fyournextstore\u0026env=ENABLE_EXPERIMENTAL_COREPACK,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY,STRIPE_CURRENCY\u0026envDescription=Read%20more%20about%20required%20env%20variables%20in%20YNS\u0026envLink=https%3A%2F%2Fgithub.com%2Fyournextstore%2Fyournextstore%2Ftree%2Fupcoming%3Ftab%3Dreadme-ov-file%23add-environmental-variables\u0026project-name=yournextstore\u0026repository-name=yournextstore\u0026demo-title=Your%20Next%20Store\u0026demo-description=A%20Next.js%20boilerplate%20for%20building%20your%20online%20store%20instantly%3A%20simple%2C%20quick%2C%20powerful.\u0026demo-url=https%3A%2F%2Fdemo.yournextstore.com%2F\u0026demo-image=https%3A%2F%2Fyournextstore.com%2Fdemo.png\"\u003e\u003cimg src=\"https://vercel.com/button\" alt=\"Deploy with Vercel\" /\u003e\u003c/a\u003e\n\u003c/td\u003e\n\u003ctd\u003e\n\u003ca href=\"https://www.producthunt.com/posts/your-next-store?utm_source=badge-featured\u0026utm_medium=badge\u0026utm_souce=badge-your\u0026#0045;next\u0026#0045;store\"\u003e\n\t\u003cpicture\u003e\n\t\t\u003csource\n\t\t\tmedia=\"(prefers-color-scheme: dark)\"\n\t\t\tsrcSet=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=459751\u0026theme=dark\"\n\t\t/\u003e\n\t\t\u003cimg\n\t\t\tsrc=\"https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=459751\u0026theme=light\"\n\t\t\theight=\"36\"\n\t\t\talt=\"Your\u0026#0032;Next\u0026#0032;Store - E\u0026#0045;Commerce\u0026#0032;with\u0026#0032;Stripe\u0026#0032;as\u0026#0032;the\u0026#0032;backend | Product Hunt\"\n\t\t/\u003e\n\t\u003c/picture\u003e\n\u003c/a\u003e\n\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n👉 [demo.yournextstore.com](https://demo.yournextstore.com/) 👈\n\n\u003c/div\u003e\n\n## 演示\n\nhttps://github.com/user-attachments/assets/64197310-29bd-4dd3-a736-1494340e20e8\n\n## 前提条件\n\n### Node.js 20+\n\n我们正式支持当前的 LTS 版本——在撰写本文时是 v20 版本。YNS 应该可以在 v18、v20 和 v22 上运行。如果你在使用这些版本时遇到问题，请报告给我们！\n\n#### 安装 Node.js\n\n请根据此处的说明选择适合你的操作系统进行操作：[nodejs.org/en/download](https://nodejs.org/en/download)\n\n### pnpm 9+\n\n我们正式支持 pnpm v9 版本，同时会尽最大努力保持与 npm 和 yarn 兼容。\n\n#### 安装 pnpm\n\n安装 pnpm 最简单的方法是通过 Node.js Corepack。在 YNS 文件夹中，运行以下命令：\n\n```bash\ncorepack enable\ncorepack install\n```\n\n或者，根据此处的说明选择适合你的操作系统进行操作：[pnpm.io/installation](https://pnpm.io/installation)\n\n## 创建 Stripe 账户\n\nYNS 与 [Stripe](https://stripe.com) 紧密整合，因此你需要有一个 Stripe 账户才能使用 Your Next Store。根据以下 Stripe 的说明来[创建一个账户](https://dashboard.stripe.com/register)。\n\n需切记的是， Stripe 有两种不同的工作模式：**测试模式 (Test Mode)** 和 **生产模式 (Production Mode)**。对于在本地开发和测试目的，你应该使用**测试模式**。通过这种方式，Stripe 将不会产生实际扣款，你可以使用特殊的测试凭证，例如信用卡号码和 BLIK 号码来完成支付。更多详情，请参阅 [Stripe 测试文档](https://docs.stripe.com/testing)。\n\n一旦您准备好将产品销售给真实客户，就必须在 Stripe 中将**测试模式 (Test Mode)** 切换到**生产模式 (Production Mode)**，并生成新的凭据。\n\n\u003e [!TIP]提示\n\u003e 这个步骤将需要通过 Stripe 的额外验证，我们建议你即刻开始该步骤。\n\n## 添加环境变量\n\n要使 YNS 正常运行，你将需要定义几个环境变量。对于本地开发和测试环境，你可以创建一个空白 `.env` 文件，并将 `.env.example` 中的内容复制到其中。\n\n要在生产环境中设置 env 变量，你需要查阅你的托管服务提供商的文档。\n\n### 必需的环境变量\n\n- `ENABLE_EXPERIMENTAL_COREPACK` – 仅适用于 Vercel：设置为 `1` 以启用 Corepack\n- `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` – Stripe 发布密钥 (publishable key)\n- `STRIPE_SECRET_KEY` – Stripe 密钥 (secret key)\n- `STRIPE_CURRENCY` – 用于确定你的商店的货币。目前只允许使用单一货币，应该使用三个字母的 ISO 代码（例如 `usd`）。\n- `NEXT_PUBLIC_URL` – **在 Vercel 上可选** 不带结尾斜杠的商店 URL 网址，例如 `https://demo.yournextstore.com`。首次构建时，你应将其设置为任何有效的 URL，例如 `http://localhost:3000`。\n\nhttps://github.com/yournextstore/.github/assets/200613/01d27f69-00dc-446e-bc81-5dea2587f346\n\n### 可选的环境变量\n\n- `NEXT_PUBLIC_UMAMI_WEBSITE_ID` – Umami 服务网站分析 ID\n- `NEXT_PUBLIC_NEWSLETTER_ENDPOINT` – **预览功能**：未来新闻通讯表单功能的端点 (endpoint)。它应该接受带有 JSON `{ email: string }` 的 POST 请求，并返回 JSON `{ status: number }`。\n- `STRIPE_WEBHOOK_SECRET` – **预览功能**：处理 Stripe 事件的 Stripe 网络钩子 (webhook) 密钥。请在底下阅读更多信息。\n- `ENABLE_STRIPE_TAX` – **预览功能**: 设置为任意值（例如 `1`）以在 YNS 中启用 Stripe 税务功能。请在底下阅读更多信息。\n- `NEXT_PUBLIC_LANGUAGE` - 商店语言。\n\n## 运行商店\n\n完成上述步骤后，运行 `pnpm install` 安装所需的依赖项，然后运行 `pnpm dev` 启动。Your Next Store 将运行在 [localhost:3000](http://localhost:3000) 上。\n\n## 添加产品\n\nYour Next Store 从 Stripe 获取所有产品、价格、描述和类别数据。因此，如果你已经熟悉 Stripe，那你会很快上手！\n\n要在 YNS 中显示，你需要先在 Stripe 管理面板中添加产品。登录后，点击左侧边栏中的**更多**，然后选择**产品目录**。你也可以使用直接链接：\n\n- **测试模式 (Test Mode)**： [dashboard.stripe.com/test/products](https://dashboard.stripe.com/test/products)\n- **生产模式 (Production Mode)**: [dashboard.stripe.com/products](https://dashboard.stripe.com/products)\n\n然后，点击**添加产品**，并填入所有必填信息：\n\n- 名称\n- 描述\n- 价格 – 目前只支持 _一次性 (One-off) 定价_，\n- 一张产品图\n\n### 元数据 (Metadata)\n\n此外，Your Next Store 使用元数据来提供更多有关产品的信息。你可以指定以下元数据字段：\n\n| 字段      | 必填 | 描述                                                                     |\n| ---------- | :------: | ------------------------------------------------------------------------------- |\n| `slug`     |   是    | 用于产品 URL 网址。需要是唯一的，变体除外。      |\n| `category` |    否    | 用于产品类别。                                |\n| `order`    |    否    | 用于对产品进行排序。较小的数字优先显示。 |\n| `variant`  |    否    | 变体产品标识。请在底下阅读更多信息。                              |\n\n现在你应该能在 Your Next Store 中看到所有添加的产品。\n\n## 变体\n\nYour Next Store 支持简单的变体产品。要创建带变体的产品，你必须在 Stripe 中添加多个产品，并使用相同的 `slug` 元数据字段。YNS 使用 `variant` 元数据字段来区分同一产品的不同变体。例如，你有一件有多个尺寸的 T 恤产品，你可以创建三个产品，`slug` 字段均为 `t-shirt`，`variant` 字段分别为 `small`、`medium` 和 `large`。\n\n变体显示在产品页面上。变体可以有不同的价格、描述和图片。值得注意的是，为了获得最佳浏览体验，同一产品的所有变体的`类别`都应该相同。\n\n\u003e [!NOTE]备注\n\u003e 我们之后计划在内置的管理面板中添加编辑产品和变体的功能。如果你有任何想法或建议，请告诉我们！\n\n## Stripe 网络钩子 (Webhooks)\n\nYour Next Store 使用 Stripe 网络钩子处理来自 Stripe 的事件。目前，该端点用于自动重新验证购物车页面和创建税务交易（如果启用）。要设置网络钩子，请参考 Stripe 文档。具体步骤取决于你是否在 Stripe 账户中激活了 Stripe 工作台：[docs.stripe.com/webhooks#add-a-webhook-endpoint](https://docs.stripe.com/webhooks#add-a-webhook-endpoint).\n\n网络钩子的端点是 `https://{YOUR_DOMAIN}/api/stripe-webhook`。唯一必需的事件是 `payment_intent.successed`。在 Stripe 中配置网络钩子后，将 `STRIPE_WEBHOOK_SECRET` 变量值设置为 Stripe 创建的密钥 (secret key)。\n\n\u003e [!NOTE]备注\n\u003e 我们之后计划为网络钩子中添加支持更多事件，以改善用户体验。\n\n## Stripe 税务\n\nYour Next Store 集成了 Stripe 税务的预览功能。要启用它，请将 `ENABLE_STRIPE_TAX` 环境变量值设置为任何值（例如 `1`）。\n\n为正常运运行此功能，你必须在 Stripe 管理面板中完成税务相关设置：[dashboard.stripe.com/register/tax](https://dashboard.stripe.com/register/tax)。在启用功能并配置后，税费会基于产品价格自动计算并添加到总价格中。\n\n- 产品价格 - 可以含税或不含税\n- 产品税码\n- 客户地址\n- 客户税号\n\n\u003e [!WARNING]警告\n\u003e 该功能仍处于早期阶段，可能存在不支持的极端情况。我们正在积极改进它，如果你遇到任何问题或有任何建议，请告诉我们！\n\n## 生产部署\n\n### Vercel\n\n要在 Vercel 上部署，请点击以下按钮，设置你的 GitHub 仓库和环境变量，然后点击**部署 (Deploy)**。确保将 `ENABLE_EXPERIMENTAL_COREPACK` 变量值设置为 `1`。\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fyournextstore%2Fyournextstore\u0026env=ENABLE_EXPERIMENTAL_COREPACK,NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY,STRIPE_CURRENCY\u0026envDescription=Read%20more%20about%20required%20env%20variables%20in%20YNS\u0026envLink=https%3A%2F%2Fgithub.com%2Fyournextstore%2Fyournextstore%2Ftree%2Fupcoming%3Ftab%3Dreadme-ov-file%23add-environmental-variables\u0026project-name=yournextstore\u0026repository-name=yournextstore\u0026demo-title=Your%20Next%20Store\u0026demo-description=A%20Next.js%20boilerplate%20for%20building%20your%20online%20store%20instantly%3A%20simple%2C%20quick%2C%20powerful.\u0026demo-url=https%3A%2F%2Fdemo.yournextstore.com%2F\u0026demo-image=https%3A%2F%2Fyournextstore.com%2Fdemo.png)\n\n### 自建 VPS\n\n即将发布。\n\n### Docker\n\n要在 Docker 上部署，请参照以下步骤：\n\n1. 复制本仓库到一个空白文件夹中，并按[此处描述](#add-environment-variables)在仓库中创建 .env 文件\n2. 在 .env 文件中设置变量 DOCKER=1\n3. 运行 `pnpm run docker:build`\n4. 然后，运行 `pnpm run docker:run` 启动容器\n\n## 以上\n\nYNS 每天都在优化，我们积极寻求反馈意见以改进我们的工作。如果你有任何疑问，请随时通过 Discord 与我们联系。\n\n## FAQ\n\n### 为什么你们有时候使用 `structuredClone` 将数据从服务器传递到客户端组件？\n\n只有某些特定类型的数据可以从服务器直接传递到客户端。来自 Stripe SDK 的数据通常包含类实例。为了解决这个问题，我们使用 `structuredClone` 来消除它们，只向客户端传递普通对象。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyournextstore%2Fyournextstore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyournextstore%2Fyournextstore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyournextstore%2Fyournextstore/lists"}