SSR：基于 Next.js 的可登录文档站点

详细介绍如何使用 Trae AI 从零开始构建一个基于 Next.js 的服务端渲染文档站点，包含用户注册、登录和文档管理功能。

前文我们接触了和 Trae AI 相关的基础功能和进阶功能，从本节开始，我们将正式进入实践篇的学习，以具体的项目出发，基于 Trae AI 从零完成不同类型项目的开发搭建。

值得一提的是，虽然只是小册子的实践，但项目本身还是希望可以脱离过于简单的 Demo 程度，都挑选了一些有实际业务场景和复杂度的项目，所有的代码将尽量用 Trae AI 直接生成，并介绍生成的整个过程以及对应节点的耗时情况，希望对大家的使用能有所启发。

这一节我们来实现一个基于 Next.js 的用户文档站点，类似低配版掘金，它满足几个功能：

• 支持用户注册、登录、退登
• 支持进行用户维度的文档增删改查，并进行数据独立存储

项目初始化（耗时 5 分钟）

在 Builder 模块使用如下提示词完成项目初始化：

在当前工作空间完成 Next.js 项目的创建，并完成依赖安装

根据 Builder 的引导执行指定的 shell 脚本，然后点击预览功能，将在 Trae AI 中打开一个 webview 进行指定端口的访问，可以看到一个初始化的 Next.js 项目已经初始化好了。

登录模块的实现 （耗时 30 分钟）

下面我们实现了一个注册、登录和退登的功能，全过程没有直接上手写一行代码。中间过程的问题排查与修复以及新增的需求都由 Builder 完成。

基础功能的实现非常顺利，数据库选型使用的 mongodb。不过在运行的时候发现页面报错了，第一次修复为 Builder 提供了图片作为多模态辅助判断，但它的自行修复失败了，它给了错误的判断。

所以这里自己调试了一下，提供了更具体的错误信息，初步判断应该是 mongodb 未正常安装启动，Builder 开始指引完成依赖的安装，这个问题顺利修复。

到这里注册、登录的功能就完成了，我们还需要一个退登的交互。退登的逻辑也经过两次询问，初版生成的退登交互的初始状态可能会异常，无法即时同步。

到这里注册、登录和退登的功能就实现完了，我们看看效果，注册的账户是 test，登录后会呈现在右上角。

支持文档的增删改查 （耗时 60 分钟）

与登录模块实现类似，我们先使用 Builder 来实现整体的交互。

期间出现了网络或者模型 API 不稳定的情况，导致失败了，对于这种情况大家可以再补充一个"重试"或者"继续"的 Prompt 保证任务完整，初版交互的生成耗时了同样 30 分钟左右，具体交互如下所示。

不过有个问题是文档的创建无法正常使用，documents 接口（负责文档的增删改查）报错 401 鉴权异常。目前使用的方案是用的 Next.js 提供的 next-auth/jwt 实现 JWT 鉴权，这部分修复坦诚地说花费了不少的时间，约 30 分钟。

前期的修复方案我还是让 Builder 帮我在现有方案基础上进行修复，我尝试了多模态、 语境等手段提供了不同维度的排查信息， 不过 Builder 一直没有修到重点。同时因为最近用得太多，个人账号触发风控策略了，一直限流...这部分体验有点难受，找同事帮忙开了白名单才得以继续。

其实通过这个过程，我们可以意识到，通常一个问题如果询问了 3 - 4 次后，仍然没有修复，说明这个问题大概率 Builder 也解不了了，这时候需要提供更细致的问题原因、补充信息或者换个思路。

另一个原因也是因为我不熟悉 next-auth/jwt 这个库，也不太想专门去看它的文档，没有提供更细致的初步排查归因，所以让它换了常规的 JWT 实现。

现在站点已经支持了文档的增删改查，我们来看看效果吧。

不过看上去还有一些问题，虽然不影响使用，报错是这样的

根据 Next.js 官方文档的说明，服务器端的动态参数需要使用 await 访问属性，我们加上 await 就行。

交互优化（耗时 5 分钟）

最后我们优化一下交互，同样使用 Builder 完成，附带一张掘金的截图作为参考

最后优化效果如下图

当然我们也可以考虑做更多的事情，例如首页推荐、评论区等功能，感兴趣的同学可以课后进一步尝试。