Menu

本地启动源码仓库

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

工具准备

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

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

启动项目

步骤1: fork 源码

打开 Nexty 源码仓库，点击右上角的 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: 完成 Supabase 集成步骤

请确保已完成 Supabase 集成步骤

步骤6: 启动项目

在终端执行启动命令

npm run dev
# 或
yarn dev
# 或
pnpm dev

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

启动成功

必要设置

配置管理员账号

打开 Supabase，在 Table Editor 打开 users 表，找到你要设置为管理员的那个用户，将 role 设置为 admin。

配置管理员账号

现在用管理员账号进入控制台，就可以看到管理员的目录了。

管理员目录

更新定价计划

打开 /dashboard/prices 页面，可以看到内置的定价数据。

开始编辑定价，把内置的定价数据关联到你的 Stripe 产品，以 Pro 卡片为例

编辑定价计划

将 Stripe Price ID 修改为你在 Stripe 创建的 Price ID，然后点击 Verify & Fetch 按钮，会自动从 Stripe 拉取产品和价格信息，然后保存定价计划。

验证定价计划

提示：

  • 如果你还没有在 Stripe 后台创建产品，请先完成 Stripe 集成 章节。

更新之后，你就可以在落地页测试支付流程了。

支付测试

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

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