我做了一个真正开箱即用的 Next.js SaaS 全栈模板

NextJSNextJS实战
🧑‍💻
推荐全栈资源：
  • Nexty.dev 全栈模板：多场景 Next.js SaaS 全栈模板，内置了开箱即用的登录、支付、AI、邮件订阅等基础设施，让你真正专注于业务逻辑
  • 《Chrome插件全栈开发》：真实出海项目的实战教学课，讲解Chrome插件和Next.js端的全栈开发，帮助你半个月内成为全栈出海工程师。
  • Next.js 中文文档：样式和官网一样的中文文档，创造沉浸式Next.js中文学习体验。

    • 关注我的社交媒体的朋友都知道，最近我发布了一个 Next.js SaaS 全栈模板，因为开发工作太多了，导致我都没怎么系统地介绍模板，今天突然有灵感，边吃饭边码字，写下这篇 Nexty.dev 模板介绍。

    在3月份，吉卜力风格的AI图片爆火的时候，我决定启动独立开发计划里的「AI图片站」。

    因为观察了很多同类的产品，所以很早就有一套大致的思路，比如功能模块怎么设计、SEO内容怎么规划、启动宣传怎么进行。

    但是看一看我做过的开源启动模板，比如 SaaS模板、落地页模板、博客模板、还有长期维护并且当作核心开源项目的多语言模板，它们都只能应对单一场景，无法替我解决我大脑里构思的一切。也就是这时候，我决定先搭建一个通用的全栈SaaS模板，然后再上站。

    让我没预料到的是，做这个新模板越做越上头，功能越加越多，做AI图片站也变得没那么大吸引力了。这个新模板就是Nexty.dev ，它也由此变成我当前的主要项目了。

    在做模板的时候，一方面为了自己备忘，另一方面希望让客户了解产品的全部模块，我还做了Roadmap，把自己的开发计划公开。

    roadmap

    这样做的好处是信息透明，客户做决策没有心理负担，至少不用担心拿到的成品不符合自己的预期。

    说回「越做越上头」。因为出发点是给自己做一套可立即使用的模板，所以内置的功能越做越细。简单列几个：

    1. 登录模块。

    登录无需赘言，对于面向海外的产品，Google授权和邮箱登录是必备的。因为我经常面向开发者做点东西，所以还加了GitHub授权。

    邮箱登录其实有一个风险，例如Gmail、outlook都支持邮箱别名，用户可能通过邮箱别名注册新账号，如果你的网站有给新用户免费额度，那么很容易被白嫖。为了解决这个问题，Nexty.dev 模板内置了邮箱别名、临时邮箱的检测和过滤方法，降低被白嫖的风险。

    login

    1. 再说说支付。

    同类模板里，支付模块一般都是提供核心流程的代码，但是我是照着自己的需求做基础设施，做着做着需求越加越多，支付模块直接内置了完整的一次性付款和周期订阅付款加积分、周期订阅续订更新积分、退款清除积分的的完整流程，并且提供配合使用的自定义示例代码。

    整个支付模块把所有通用的东西都做出来，并且把需要自己结合业务逻辑自定义的部分标注出来，让模板使用者更清楚如何快速打通完整流程。真正的开箱即用。

    如果只是如此，也够得上“有诚意”的评价。但是我觉得把定价信息放在多语言 JSON 文件管理是很麻烦的一件事，所以又给自己加需求了——在管理后台实现定价卡片的动态管理。这种实现方式是同类模板里绝无仅有的。

    动态管理定价卡片的设计也是花了心思，不仅所有卡片上的内容可以从服务端获取，还可以区分环境，避免环境混乱把开发环境的测试数据放在生产环境；还可以直接从 Stripe 拉取定价信息，这种方式最大的好处是不会因为手动操作填错信息；而且给卡片添加了多语言翻译，前端直接根据页面语言展示管理后台翻译的结果，人工只需要审核翻译文案，其他问题根本不用操心。

    无图言……，所以还是得上图：

    • 列表展示

      prices list

    • 编辑页面，支持选择卡片存在的环境、排序、是否展示（激活）；Stripe集成的部分，一键获取准确的信息，不需要手动多次复制数据

      prices form

    • 特性展示也是全部服务端配置

      prices form

    • 支持多语言翻译

      prices form

    • 支持自定义复杂的自定义权益

      prices form

    完成数据编辑后，用户端实时同步，就是下面这样：

    pricing

    这是我最满意的功能之一，因为有了这个功能，更新定价的时候，我不需要再打开代码，而是直接在管理后台界面操作，一分钟就能完成数据更新。

    1. 我还做了一个 AI 调用 Demo 的页面。

    这个模块内置了文本、图片、视频多种的 AI 功能调用方式。目的有两个：其一是，模板使用者（包括我）可以在新模型出来的时候，最快速度启动测试，验证模型API是否可用，其二是，很多人想做AI功能但是没有那么多精力学习，那么他购买了模板后就可以根据 AI Demo 快速学习AI调用流程。

    AI Demo

    其他同类模板一般只是提供封装好的 API，不会为模板提供这样的 AI Demo，只有 Nexty.dev 这么做。因为我开发的时候是以模版使用者的角度来审视是否符合我的需求。

    1. 再说说前几天发布的核心功能之一 —— CMS。

    Nexty.dev 的 CMS 模块是奔着既能做多语言博客，又能做付费 newsletter 去设计的。

    除了基本的博客必备信息（标题、slug、描述、标签、封面图），我还增加了高级功能，例如设置置顶、编辑状态（草稿、发布、归档）、访问权限（公开、登录用户、订阅用户），连正文都同时支持富文本和markdown格式，而且支持 AI 翻译。

    CMS form

    CMS form

    CMS form

    除此之外，列表页还支持复制博客来创建新博客。复制功能的使用场景是，想要快速创建多语言博客，直接复制已有语言的博客版本，进入编辑页后，修改语言选项、再翻译一下标题、描述和正文，就能快速发布不同语言的博客版本，把多语言内容生产效率拉满！

    CMS list

    这个模板原计划1-2周完成，最后愣是做了一个月，而且用户提的新需求还在开发，计划内的一些小需求也在开发。这让我原本考虑做 AI 图片站的计划只能推迟。

    结语

    模板现在还有一些优化功能正在开发，所以价格还是早鸟价，如果你正在寻找好用的模板，不妨试试 Nexty.dev。现在的价格就是历史最低价，等功能和文档逐步完善后，会涨到和竞品同级别的定价。

    等模板工作完成后，我也会使用这套模板开始自己新的产品计划，还会有更多经验分享，也会给模板新增更多有用的通用功能，希望大家继续关注～。

    关于我

    🧑‍💻独立开发｜⛵️出海｜Next.js手艺人

    🖥️做过开源：http://github.com/weijunext
    ⌨️写过博客：https://weijunext.com
    🛠️今年想做独立产品和课程
    📙Next.js SaaS 全栈模板：https://nexty.dev/zh
    📙Next.js 全栈教程：https://ship.weijunext.com
    📘Nextjs中文文档：http://nextjscn.org

    欢迎在以下平台关注我：

    发布时间：2025-05-15
    版权声明：CC BY-NC-ND 3.0 DEED
    上一篇去首页Twitter/X