前端转全栈: Next.js + ChatGPT 开发 AIGC 知识库(AI 写作) 欢迎围观~

前端技术栈已经稳定，纯前端、切图仔是没有未来的。全栈 + AI 才是出路。

开始

大家好，我是双越老师~

2024年，我打算专心搞一个 Node 全栈 AIGC 项目，一个 AI 写作项目 —— 划水AI ，现在即可可以打开访问。
这个项目是一个知识库平台，里面加入 AI 写作和内容处理，像是 notion AI 。相面有详细的功能介绍。

但这个项目不是随便搞一个 demo 然后写篇博客结束了。我对它提出如下要求：

• 必须是真实上线运维的项目，能让你注册使用的，看得见摸得着的项目。要有域名、备案、SSL 证书、服务器或 Serverless 服务、数据库、CDN、OSS、统计、监控报警等基础服务，还有手机号注册、微信扫码登录、微信支付或退款，等常见功能
• 全栈项目。拥抱全栈吧，纯前端，切图仔，未来没有前途的。前端框架和技术栈已经未定了，你再去卷源码、造轮子没有太多意义的。node 全栈（或 SSR）却有另外一片天地
• 要有一定的技术难度和挑战性，项目中会开发编辑器，AI 能力集成，多人在线协同编辑，这些都很难，放到简历中都是亮点。
• 一个有前途、且实用的业务方向。例如低代码、中台 已经过时了，开源项目也不可持续，都不好。目前看来，AIGC 是一个不错的方向（就在前两天 OpenAI 发布 Sora 智能生成视频，刷爆朋友圈）

如果你有兴趣，欢迎来围观，可以学习项目的设计、开发、上线、运维过程，也可以加入一起远程开发。可以看 划水AI 首页，有引导和介绍~

我的技术价值观

程序员，尤其是独立开发者，应该有自己的作品和代表作。就像作家、画家、歌手一样，都要有自己的作品，才能称得上这个职位。PS：我还是一个业余画手~ 哈哈 ~~

我虽然自称“双越老师”，但我不想只当一个讲师，也不能只当讲师。 无论你技术再好，只当讲师不冲到项目第一线，慢慢就技术落后了，慢慢的就只剩下靠嘴巴和所谓的名气来“忽悠”学员。

最开始我在大厂（某度、某滴）工作。后来我的代表作是 wangEditor 开源富文本编辑器，在国内开源领域也算是小有名气了，被很多开发者下载使用。

半年前我宣布 开源富文本编辑器 wangEditor 暂停维护 ，然后就一直在寻找下一个项目。虽然是技术驱动的，但这个项目也不能随意找，毕竟是未来要倾注很多精力的项目。最终决定搞一个 AIGC 方向的。

项目介绍

取名 “划水AI”

项目的业务方向（AIGC 和 AI 写作）我早就想好了，但名字想了好久，取名是最纠结的。而且取名，还得有对应的域名，现在域名资源几近枯竭了。

一开始我取名 “AI 小记” 并申请了域名 aixiaoji.com ，这个名字比较符合“AI 写作”方向。

后来我又想到“划水 AI”这个名字，搜一下还有域名，果断购买注册。并且申请了 SSL 证书，解析到服务器 https://huashuiai.com/

“划水”有点偷懒的意思，而 AIGC 就是让大家偷懒的。回看历史，有太多的发明是因为想偷懒。汽车有了自动挡，左脚就可以划水了。

功能介绍

首先它是一个知识库平台（像语雀、石墨文档、腾讯文档），支持富文本编辑，还会支持团队、多人协同编辑。

在此基础上，再在富文本编辑器中增加 AI 辅助写作功能。例如在空格行，点击 space 键唤起 AI 输入框。

在此输入 prompt 提示语，让 AI 生成内容。

还可以选择一段文字，交给 AI 来处理（扩展、缩短、总结、翻译等）。

还有更多有意思的功能，例如当你没有思路时 AI 来头脑风暴，再例如把一些内容整理为表格……

不仅仅是文字和写作

AI 现在遍地开花。前几天 OpenAI 刚刚发布了 Sora 可根据文字生成视频，刷爆朋友圈。

基于这个知识库平台，可集成更多的形式，像 AI 生成图片、音频、视频，或者让 AI 自动审核、发布或者评论。AI 的想象力刚被开发，亟待未来释放。

例如可以使用 AI 做 ppt ，输入内容即可生成大厂宣传片一样的动画效果，这都是即将要发生的。

类似产品

国外最出名的就是 notion。notion 本来是一个知识库平台（像国内语雀、腾讯文档），2023 年 notion 推出 AI 写作功能，直接惊艳了全世界的创作者，也让它和其他知识库平台立马拉开差距。

国内目前有 火山写作（字节出品），讯飞写作（科大讯飞出品），百度智能写作平台。这些都是各大公司出品的，背后分别是他们自己的 AI 大模型。更多的是一种展示价值，而非商业价值。

这方面国内总是落后一步，但也得步步跟紧啊。

项目架构设计

项目架构设计图如下，概述所有的功能。

编辑器

既然是知识库和 AI 写作项目，富文本编辑器是最重要的功能。恰巧我作为 wangEditor 作者，比较擅长富文本编辑器，这是我做该项目的一大优势。

另外，AI 写作需要将富文本编辑器的能力，和 AI 能力结合起来。开发过程是难上加难，一旦做出来将效果加倍。

AI 写作

上文已经讲到了，并给出 gif 动图示例。

协同编辑

知识库项目要支持团队，多人协同编辑是一个最基本的需求。所以该功能从一开始就要考虑进去。

用户管理

开发注册用户，要支持多种用户注册方式，如微信扫码、github 登录、短信验证码、邮箱验证码。
这些可能需要注册（或购买）和使用第三方服务，只有线上真实项目才会用到。

还要有严格的用户管理机制，对于举报的违规用户要及时封禁。

VIP 和支付功能

ChatGPT 等 AI 模型的 API 都是收费的，如果用户多了，完全免费是不可能的。所以肯定得需要搞一个 VIP 和收费机制，才能持续运行。

另外，对于团队人数、协同编辑在线人数、作品数量等，也可以分等级制定 VIP 相应的收费标准。毕竟线上项目，各种服务和硬件都是花钱买的。

免费是不可持续的，认真才会考虑收费。

导入导出

要支持导入网页、word 文档，以及导出图片、pdf、word 等格式。
需考虑大文件上传，切片上传，断点续传，秒传等常见功能。

技术选型

技术栈

使用 React + Next.js 全栈开发。
React 是全球最火前端框架，Next.js 这两年也在大力发展，尤其 v14 支持服务端组件和 Stream 流式渲染，对于性能和体验都非常好。

该项目的后台管理系统，有可能会考虑 Nest.js 开发服务端，采用前后端分离的方式。加入 Nest.js 也可以扩充我们在 node 全栈领域的技术广度和深度。

PS：不会 React 和 Next.js 怎么办？我未来会出两套免费的入门 ke 程，后面会发博客到掘金。

数据库

选择 prisma + MySQL 或 pgsql ，这也是 node server 比较常用的一套数据库解决方案。
如果后期有需要，再增加如 redis 等其他数据库。

AI 大模型

优先选择 ChatGPT（即 OpenAI Platform），3.5 turbo 的接口我已经搞定了，后面看能否升级到 4.0

国内用 ChatGPT API 还是有一些不确定性的，好在现在大模型有很多。国外有 ChatGPT Claude 等，国内也有文心一言、通义千问、科大讯飞等。项目会支持多种 AI 大模型，并供用户自由选择切换。

编辑器

Slate.js 是非常流行的编辑器底层能力，而且它就是使用 React 渲染 UI ，它非常灵活而且 API 健全，很适合搭建自定义的富文本编辑器。wangEditor v5 也是基于 slate.js 的。

Tiptap 也是一个非常火的编辑器，它是基于 ProseMirror 封装的，后者也是老牌的富文本编辑器。
Tiptap 封装好的东西比较多，有各种插件，而且它还内置了 AI 功能，对 AI 开发比较友好。
但 AI 功能它是要收费的，而且要接入它（国外）的服务，国内稳定性是个风险。

至于选择哪个，我现在还不确定，待去仔细调研一下。会从两者其中认真选择一个。

PS：wangEditor 适合做一些传统文档的编辑器，不太适合这种高度自由定制、且要集成 AI 能力的场景。

协同编辑

在线文档知识库发展 10+ 年，协同编辑器已有比较成熟的方案，node.js 可使用 yjs 解决，它支持多种富文本编辑器。

上线和运维

使用 Next.js 开发，最好是用 Vercel 的部署和运维，但很遗憾国内不能用。虽然是付费的，但 Vercel 支持 Serverless、pgsql数据库、Edge runtime、CDN、统计等，用起来很方便。

国内的 Serverless 腾讯云的、阿里云的，感觉都还没有做到很成熟。所以，可以先用云服务器 + Docker 部署起来用着，再去探索 Serverless 的方案吧。

另外，既然要上线，那肯定也少不了数据库、CDN、OSS、统计、监控报警等基础服务，还有手机号注册、微信扫码登录、微信支付或退款，等第三方服务。

项目可锻炼的技术能力

从前端到全栈

前端技术栈已经稳定，纯前端、切图仔是没有未来的。

前端技术栈已经稳定了，React 都一两年没更新了，Vue 升级也是小改动。打包构建工具也只能去卷效率和速度了（甚至不用 nodejs 改用 rust）配置就那些了。

技术栈稳定了，就不需要那么多精力去搞技术、搞配置、搞流程、造轮子了，纯前端也就没太多用武之地了（就搬砖搞业务）。

所以 node 全栈才是出路，不信你看 React 最近的一些实验性功能，都是服务端渲染相关的。

真实、复杂项目的架构能力

对于一个业务复杂的项目，作为技术负责人（架构师）你应该如何从 0 到 1 开始设计，应该考虑哪些方面？应该如何编写技术方案文档，如何画出架构设计图？ —— 这些我想大部分前端人员是没有经验的。

项目有哪些难点，有什么复杂度？如何识别出来，如何调研，如何得出解决方案，如何安全应用到项目中？这些也是高级（特别5+年经验）程序员需要掌握的能力。

一个真实项目，如何从 0 开发、测试，最后上线和运维，如何保证安全稳定的运行？如何发布上线到云服务器，如何操作线上数据库，如何监控线上服务（出问题要报警），如何做日志和统计，如何保证安全性和稳定性，？—— 这是一个项目负责人最需要关心的事情。
如果项目隔三差五 500 报错，那你年终奖还要不要了？

PS：很多 ke 程都号称自己的项目“真实” “复杂”甚至“企业级”，我作为这个行业从业老司机，当然知道这其中的玄机。希望大家能理性思考，当年看到这种词汇的时候，问一下：这个项目是如何上线的？如何做统计和监控的？我可以用手机号注册吗？…… 一问便知。

开始接触 AI 和 AIGC

你看全世界有多少人在搞 AI 相关的事情，国内和国外，看看有多少资本涌入了 AI 领域。当前大环境不好，AI 是唯一能吸引资本的领域，也是未来破局的唯一机会。

作为一名程序员，虽然我们不是直接搞 AI 大模型的，但也得近水楼台先得月、春江水暖鸭先知，得及早接触。AIGC AI 写作就是一个很好的方向。

还有更多

作为一个真实上线、全流程、业务复杂的项目，它涵盖的技术能力还有很多。如权限、中间件、日志、OAuth、CI/CD DevOps，安全，性能统计等。

过几天我会整理一篇《资深前端工程师（架构师）知识体系》整理成一个思维导图，到时会发布到掘金，可以关注我。

已做的准备

春节假期期间我已经做了一些基础准备，有了这些就可以做起来。

域名、SSL证书、云服务器

这些都已经购买了，并且把域名（ https://huashuiai.com/ ）指向了服务器。

ChatGPT API 已经充值

先充值 20刀 用着，不够再冲。PS：刚注册的账号会赠送 5刀 ，大家不要浪费。

ChatGPT Plus 已经升级

我重新注册了一个 Plus 账号（和 API 的账号不一个），后面会把 API 升级到 GPT4.0 。

务虚年代，逆风飞翔

现在是一个务虚的时代，务实的人太少了。务虚低成本高收益。务实，成本高，而且你还得能做出来呀！

君子只动口，傻子才动手呢。 中国人自古以来就是：圣人坐而论道、舌战群儒，没有去动手做实验的。

你看某某人搞ke程、训练营、私教ke，资料多少多少 G ，项目多少多少个，有多少真东西？

你看知乎上那些侃侃而谈的，各种高大上的描述，有多少真东西？ PS：哎~他还顺手甩给你一个ke程链接。

我即将 36 岁，还能有这种创造力和执行力其实挺不容易的。

30 岁之前大家都精力满满，对未来充满好奇和希望，对技术充满动力和热情，浑身都充满了创造力。但是慢慢熬到 35+ 就容易如老牛一般（王小波说的“被锤的公牛”）被工作生活磨的角都没了。

我最早开始写博客是 2014 年，最早开发 wangEditor 是 2015 年，至今已快 10 年了。即便强如周杰伦，他的创作黄金期也不到 10 年（随便举个例子，不是拿自己和周杰伦比，我也是周杰伦铁粉~）

所以，既然还有，就且行且珍惜吧。划水AI 搞起来！ 想围观或参与的可私信我。

PS：多说一句，你现在想去干什么，你就抓紧去干（只要不违反法律和普世道德），别想着等以后有空了、有钱了。第一，你以后不一定有空、有钱；第二，你以后可能就压根没这个想法了，就变成老牛了。

与君共勉。