Claude Code Next.js 页面检查清单

检查 Next.js 页面问题前，先用清单把范围收住。客户说“页面坏了”不够，你需要知道页面路径、复现步骤、预期效果、数据来源、相关权限和验收方式。Claude Code 适合帮你定位文件，但不应该替你跳过范围确认。

建议先读 用 Claude Code 检查 Next.js 页面小问题怎么做，再搭配 Claude Code 错误排查检查清单 和 /templates 使用。

适合谁

适合检查一个明确页面或一个明确组件的新手。比如首页按钮、列表页筛选、详情页文案、表单提示、移动端间距、构建时页面报错。

也适合交付前复核。页面改完后，清单能帮助你确认是否写清楚验证方式和未覆盖范围。

不适合谁

不适合全站重构、设计系统重做、支付流程、后台权限、数据库和真实用户数据相关任务。这些不属于普通页面检查。

也不适合没有复现步骤的任务。没有复现，只能先做诊断，不能直接承诺修复。

具体步骤

1. 是否有页面路径？URL、路由或截图中的位置要明确。
2. 是否知道项目路由类型？App Router、Pages Router 或混合结构会影响文件位置。
3. 是否有复现步骤？打开页面、点击按钮、输入内容、刷新或切换状态。
4. 是否有预期效果？客户认为正常结果是什么。
5. 是否有实际结果？现在具体哪里不对。
6. 是否知道数据来源？静态数据、接口、CMS、环境变量、登录态要分开。
7. 是否涉及敏感权限？账号、后台、付款、真实数据不要默认处理。
8. 是否找到相关文件？路由文件、组件、样式、数据请求、配置都要记录。
9. 是否运行本地检查？lint、build、本地预览或手动流程。
10. 是否写清客户验收动作？客户该在哪看、怎么确认。

客户信息模板

为了判断这个 Next.js 页面问题是否适合处理，请先提供：
- 页面 URL 或路由
- 复现步骤
- 预期效果和实际效果
- 截图或脱敏错误
- 是否需要登录、接口、环境变量或测试数据
- 希望怎样验收

这段可以直接用于客户沟通，先补齐信息，再决定诊断或修复。

页面检查记录模板

页面路径：
相关文件：
问题现象：
数据来源：
修改内容：
验证结果：
未覆盖范围：
客户验收：

这份记录可以同时服务 Claude Code、你自己的复盘和最终交付说明。

判断结果分类

信息完整、页面明确、可本地验证：可以进入小范围修复。信息缺失但风险低：先做诊断。涉及登录权限、生产数据、支付、后台配置：暂不按普通页面小单处理。

分类要写给客户看，不要只在心里判断。客户看到分类后，更容易理解你为什么先问问题。

影响范围检查

检查页面时，再补三问：这个改动是否影响其他路由？这个组件是否被复用？这个样式是否是全局样式？如果答案不确定，先让 Claude Code 帮你搜索引用，再人工确认。

只要影响超过一个页面，就要把它写进说明。客户原本只让你修一个页面，如果你改了全站按钮或布局，后续任何页面变化都可能变成争议。

交付前复核

发送交付前，确认说明里有页面路径、改动摘要、验证结果和未覆盖范围。还要写清客户验收步骤：在哪个环境、打开哪个页面、操作什么、看到什么。

如果你只完成了诊断，没有修改代码，也要明确写出“本次未修改代码”。客户需要知道自己收到的是判断，不是修复。

客户回复示例

我可以先检查这个页面问题。为避免范围过大，本次只看你提供的页面路径和一个明确现象，不处理全站重构、生产部署、真实数据或账号权限。请先补充页面 URL、复现步骤、预期效果和验收方式。

这段回复适合信息不完整时使用。它既没有拒绝客户，也没有过早承诺完整修复。

验收记录示例

页面：/pricing
修改：移动端价格卡片间距
验证：本地 build 通过，手动检查 390px 宽度
未覆盖：支付流程、生产部署、后台配置
客户验收：测试环境手机宽度确认卡片不重叠

这类记录能直接放进交付说明，也方便后续复盘。

风险提醒

不要把客户生产账号、接口密钥或真实数据作为页面检查材料。能用测试数据，就不要碰真实数据。

不要把构建通过当成页面验收。构建通过只是技术检查，还需要客户按页面流程确认。

免责声明

本文仅供学习和项目流程参考，不构成安全、法律、财务或平台合规建议。Claude Code 功能、Next.js 项目结构和客户验收要求可能变化，发布前需要人工复核。项目前请确认授权、脱敏、测试环境和交付边界。

CTA：开始页面检查前，把这份清单放进 /templates；需要写客户补充信息请求时，用 /tools/proposal-generator 起草后人工复核。