本地启动源码仓库

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

工具准备

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

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

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

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

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

git clone https://github.com/your-github-username/your-fork-repo-name.git

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

cd your-fork-repo-name

使用 pnpm 安装依赖

pnpm install

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

cp .env.example .env.local

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

提示：

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

如果你已经按照 Supabase 集成章节的步骤执行过 SQL 了，那么这里不需要重复执行。

打开项目根目录下的 data 文件夹，依次把所有 sql 文件在 Supabase 的 SQL Editor 执行。

在终端执行启动命令

npm run dev # 使用 npm 启动
或
yarn dev # 使用 yarn 启动
或
pnpm dev # 使用 pnpm 启动

启动成功后，在浏览器访问 http://localhost:3000 即可看到项目效果。

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

现在用管理员账号进入仪表盘，就可以看到管理员的目录了。

如果你已经完成 Supabase 集成章节的步骤，那么现在进入 /dashboard/prices 页面就能看到内置的定价卡片了。

现在你需要编辑 Stripe 关联的卡片，以「Pro」卡片为例

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

提示：

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

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

至此，你已经完成了 Nexty.dev 源码仓库的全部本地配置和启动流程。

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