Menu

本地启动源码仓库

本章将指导你完成源码仓库的本地配置和启动流程。

工具准备

在开始之前，你需要准备以下工具：

如果你刚开始使用 VSCode 或 Cursor，可以安装我推荐的一些编辑器插件，这些插件能帮助你提升编程效率：Cursor 插件推荐

启动项目

步骤1: fork 源码

打开 NEXTY.DEV 源码仓库，点击右上角的 Fork 按钮，将源码仓库 fork 到你的 GitHub 账号下。

fork
fork

步骤2: 克隆源码

打开你的 GitHub 账号，找到你刚刚 fork 的源码仓库，点击 Code 按钮，复制源码仓库的 URL。

clone

打开终端，使用 git clone 命令克隆源码仓库。

git clone https://github.com/your-github-username/your-fork-repo-name.git
 
## 或 
 
git clone https://github.com/your-github-username/your-fork-repo-name.git <new-folder-name>

克隆完成后，使用 Cursor 或者 VSCode 打开源码仓库，并且命令行进入源码仓库目录

cd your-fork-repo-name

步骤3: 安装依赖

使用 pnpm 安装依赖

pnpm install

步骤4: 填写环境变量

在根目录下创建 .env.local 文件，并填写环境变量。

cp .env.example .env.local

环境变量介绍请阅读环境变量

提示：

  • .env.local 仅用于本地开发环境，生产环境需要使用 .env 文件。

步骤5: 完成数据库集成步骤

去完成数据库集成

步骤6: 启动项目

在终端执行启动命令

npm run dev
# 或
yarn dev
# 或
pnpm dev

启动成功后，在浏览器访问 http://localhost:3000 打开页面。

启动成功

必要设置

配置管理员账号

打开数据库 user 表，找到你要设置为管理员的那个用户，将 role 设置为 admin。

配置管理员账号

现在重新登录管理员账号，就可以看到管理员的目录了。

管理员目录

更新定价计划

提示

从 v4.0.0 起，定价不再存数据库，管理后台也不再有定价管理页面。定价的唯一事实来源是 config/pricing.ts。

打开 config/pricing.ts，可以看到内置的定价数据。每个套餐是一个对象，provider 字段声明由谁收款，对应的价格 ID 写在同名字段里（stripePriceId / creemProductId / paypalPlanId），并区分 test 与 live 两套环境：

{
  id: 'pro-monthly',
  kind: 'subscription',
  interval: 'month',
  monthlyCredits: 2000,
  provider: 'stripe',
  stripePriceId: {
    test: 'price_REPLACE_pro_monthly_test',
    live: 'price_REPLACE_pro_monthly_live',
  },
  price: 29.9,
  currency: 'USD',
  active: true,
  copy: { en: { ... }, zh: { ... }, ja: { ... } },
}

把 price_REPLACE_* 占位符换成真实的 Price ID，有两种方式：

方式一：用脚本自动创建并回填（推荐）

# 先试运行，只打印将要创建的内容
pnpm stripe:bootstrap
 
# 确认无误后写入：在 Stripe 创建产品和价格，并回填 config/pricing.ts
pnpm stripe:bootstrap --write

脚本按 STRIPE_SECRET_KEY 的前缀判断写入哪一列（sk_test 写 test，sk_live 写 live），并且是幂等的：产品按 metadata.planId 复用，价格按金额 + 币种 + 周期匹配复用，已经回填过的条目会跳过。

方式二：手工填写

如果你已经在 Stripe 后台建好了产品，直接把 Price ID 粘贴进对应字段即可。

提示：

  • 如果你还没有在 Stripe 后台创建产品，请先完成 Stripe 集成 章节。
  • 套餐的 id 永不复用，售出过的套餐也不要删除（历史订单和积分流水靠它反查）。下架请用 active: false。

改完之后，重启开发服务器，你就可以在落地页测试支付流程了。

支付测试

你可以使用 Stripe 提供的以下信息测试支付流程：

  • 信用卡：4242 4242 4242 4242
  • 使用有效的未来日期，例如 12/34
  • 使用任意三位数 CVC（American Express 卡为四位）
  • 其他表单字段可以使用任意值。
测试支付