从你现有的应用开始
一个可运行的预览是有用的起点。在接受付款或邀请客户之前，先列出那些必须在非理想路径之外也能正常工作的流程。对于一个由 AI 构建的 SaaS 应用来说，这可能意味着注册、加入正确的工作区、付款、恢复访问权限以及取消订阅。保留有用的代码；在决定是否需要重建任何部分之前，先评估缺失的行为。
对于不熟悉的代码库，一次有明确范围的付费评估应当产出可复现的本地环境、按优先级排列的问题清单以及一份完成计划。请提供代码库访问权限、一个测试环境、用户角色的说明以及预期的发布范围。请通过约定的安全渠道共享凭证。
让服务器端与浏览器首次渲染保持一致
React 期望客户端的初始输出与服务器 HTML 相匹配。避免在首次渲染期间使用 Date.now()、随机标识符或仅限浏览器的存储来计算出不同的值。对于日期，请发送一个稳定的时间戳，并在两端使用相同的区域设置和时区。如果某项浏览器偏好必须改变显示内容，请在 hydration 之后再应用它，且不要移动重要内容。
suppressHydrationWarning 是针对某个元素上不可避免的差异的有限应急手段。它只作用一层，并且 React 不会通过它来修复不匹配的文本。它不是针对错误渲染或浏览器扩展的通用修复方案。在选择修复方法之前，请先复现其成因。参见 React 的 hydration 参考文档.
为路由选择合适的元数据
当标题和描述是固定的时，使用静态的 metadata 导出。当它们取决于路由参数或获取的内容时，使用 generateMetadata 。并非每个路由都需要自己的函数；布局可以提供共享的默认值。请在交付的响应中验证解析后的标题、描述、规范链接和分享图片。 Next.js 元数据参考文档 对这两种方式都有说明。
测试边界，而不仅仅是界面
- 访问： 已退出登录的用户无法读取私有数据，一个工作区也无法读取另一个工作区的记录。即使按钮被隐藏，也要检查服务器端授权。
- 集成： 在沙盒环境中演练被拒绝的付款、延迟的 webhook、重复的事件以及过期的凭证。仅凭一次成功的重定向不应授予付费访问权限。
- 数据： 记录哪些响应可以被缓存、什么会使它们失效，以及用户的私有数据如何避免进入共享缓存。请针对所安装的 Next.js 版本验证这一行为。
- 表单： 在失败后保留输入内容，显示易于理解的错误信息，并防止重复提交。请使用键盘并在较窄的宽度下进行测试。
- 发布： 验证环境变量、迁移、备份、监控以及一个可行的回滚方案。确定谁可以部署，以及谁负责处理故障。
验收检查示例
对于一个订阅仪表板，在两个独立的工作区中各创建一个测试账户。取消第一个账户的付款，为第二个账户完成一次沙盒付款，然后重放第二次付款通知。确认只有付费工作区获得访问权限，并且重放不会产生重复的权益。在发布检查清单中记录结果以及任何尚未解决的限制。
在优化之前先测量加载性能和布局稳定性，然后在更改之后重复同一场景。实验室测试有助于诊断问题；它并不能确立真实用户的 Core Web Vitals 百分位数。
Canvas Developers 提供 AI 应用完善 以及 Web 应用开发。第一步是了解当前的应用，并就一个可上线的发布版本应包含哪些内容达成一致。
