Menu

本地启动源码仓库

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

工具准备

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

启动项目

步骤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

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

cd your-fork-repo-name

步骤3: 安装依赖

使用 pnpm 安装依赖

pnpm install

步骤4：填写环境变量

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

cp .env.example .env.local

值得注意的是：

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

以下是环境变量说明：

网站基础配置

  • NEXT_PUBLIC_SITE_URL（必须）: 网站 URL

    • 本地开发填写启动地址，默认是 http://localhost:3000
    • 生产环境填写你的域名

  • NEXT_PUBLIC_LOCALE_DETECTION（必须）: 是否开启 next-intl 语言检测，建议配置为 false

    • 如果配置为 true，next-intl 会检测语言并根据浏览器语言并自动重定向到对应语言的页面

    • 如果配置为 false，则会使用 Nexty.dev 模板内置的 SEO 友好的语言检测器

    Nexty.dev 内置的语言检测器，会在用户首次访问页面时静默检查浏览器语言与当前页面语言是否一致，如果不一致会弹出提示框引导用户切换语言，从用户第二次访问开始，则会根据 cookie 记录的最后访问语言页面进行跳转。这样的做法会减少非必要的重定向，让 SEO 更加友好。

  • ALLOWED_REDIRECT_HOSTS（可选）: 允许登录成功重定向的域名白名单，非必需项，且仅开发环境有效

数据分析

  • NEXT_PUBLIC_GOOGLE_ID（可选）: Google Analytics

  • NEXT_PUBLIC_BAIDU_TONGJI（可选）: 百度统计

  • NEXT_PUBLIC_PLAUSIBLE_DOMAIN（可选）: Plausible 域名

  • NEXT_PUBLIC_PLAUSIBLE_SRC（可选）: Plausible 源

    其中 Plausible 是开源的，如果你有购买服务器，建议自部署。

广告

Supabase

Nexty.dev 的数据和认证都是用 Supabase 的服务，所以需要配置以下环境变量：

  • NEXT_PUBLIC_SUPABASE_URL（必须）: Supabase URL
  • NEXT_PUBLIC_SUPABASE_ANON_KEY（必须）: Supabase 匿名密钥
  • SUPABASE_SERVICE_ROLE_KEY（必须）: Supabase 服务角色密钥

如果你还没准备好 Supabase 账号，请先完成 Supabase 集成 章节。

Resend

Resend 是用于发送邮件的第三方服务，Nexty.dev 模板基于 Resend 实现邮件发送功能。

  • RESEND_API_KEY（非必须）: Resend API Key
  • RESEND_AUDIENCE_ID（非必须）: Resend Audience ID
  • ADMIN_EMAIL（非必须）: 自定义管理员邮箱，用于邮件展示发送方邮箱
  • ADMIN_NAME（非必须）: 自定义管理员名称，用于邮件展示发送方名称

RESEND_API_KEY 和 RESEND_AUDIENCE_ID 获取方式请参考 Resend 集成 章节。

Upstash Redis

Upstash Redis 可以用于数据缓存、请求速率限制等场景。

Nexty.dev 模板在邮件订阅的功能里，将 Upstash Redis 用于限制每日提交次数。这将作为示例，如果你的产品遇到流量攻击，可以根据示例快速调用封装好的流量限制器，把非法流量拦截在业务逻辑之前。

  • UPSTASH_REDIS_REST_URL（非必须）: Redis URL
  • UPSTASH_REDIS_REST_TOKEN（非必须）: Redis Token
  • UPSTASH_REDIS_NEWSLETTER_RATE_LIMIT_KEY（非必须）: Redis 邮件订阅速率限制的key
  • DAY_MAX_SUBMISSIONS（非必须）: 每日最大提交数

UPSTASH_REDIS_REST_URL 和 UPSTASH_REDIS_REST_TOKEN 获取方式请参考 Upstash 集成 章节。

CloudFlare R2

CloudFlare R2 是用于存储文件的服务，Nexty.dev 将其用于保存用户自定义头像、保存 AI 生成的图片和视频、保存博客配图等场景。

  • R2_ACCOUNT_ID（非必须）: R2 账户 ID
  • R2_ACCESS_KEY_ID（非必须）: R2 访问密钥 ID
  • R2_SECRET_ACCESS_KEY（非必须）: R2 密钥
  • R2_BUCKET_NAME（非必须）: R2 存储桶名称
  • R2_PUBLIC_URL（非必须）: R2 存储桶 URL

这些环境变量获取方式请参考 CloudFlare R2 集成 章节。

AI 模型

Nexty.dev 有一个 AI Demo 页面，用于调试 AI 模型的能力，如果你对 AI 功能的调用不熟悉，也可以根据这个页面的代码进行快速学习。

所有 AI Key 均从对应平台的仪表盘获取。

Stripe

Stripe 是目前最主流的支付网关，Nexty.dev 模板基于 Stripe 内置了完整的一次性支付和周期订阅功能，你可以通过环境变量设置来决定是否启用。

  • NEXT_PUBLIC_ENABLE_STRIPE（必须）: 是否启用 Stripe 支付
    • 如果配置为 true，启用 Stripe 支付功能
    • 如果配置为 false，不启用 Stripe 支付功能，且以下配置项无需填充
  • STRIPE_SECRET_KEY（非必须）: Stripe 密钥
  • STRIPE_PUBLISHABLE_KEY（非必须）: Stripe 公钥
  • STRIPE_WEBHOOK_SECRET（非必须）: Stripe Webhook Secret
  • DEFAULT_CURRENCY（非必须）: 默认货币
  • STRIPE_WEBHOOK_ASYNC_PROCESSING（非必须）: 是否启用 Stripe 重试机制
    • 依赖 Stripe 的重试机制，设置为 false
    • 如果自己有能力构建后台处理的可靠性保障，设置为 true，这样可以更快响应 stripe webhook，减少重复事件触发
  • STRIPE_CUSTOMER_PORTAL_URL（非必须）: 用户仪表盘订阅管理页面

STRIPE_SECRET_KEY, STRIPE_PUBLISHABLE_KEY 和 STRIPE_WEBHOOK_SECRET 获取方式请参考 Stripe 集成 章节。

AI 翻译

Nexty.dev 在创建、编辑定价卡片的页面内置了 AI 翻译多语言定价卡片的功能，需要配置 AI 模型的提供商和模型才能使用

  • NEXT_PUBLIC_AI_MODEL_ID（非必须）: AI 模型 ID
  • NEXT_PUBLIC_AI_PROVIDER（非必须）: AI 模型提供商

如果不想使用 AI 翻译功能，则不需要配置以上环境变量。

步骤5: 执行 sql 文件

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

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

执行 sql 文件

步骤6: 启动项目

在终端执行启动命令

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 提供的以下信息测试支付流程：

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

测试支付