SuperAPI AI 工具集

nextjs-quality

前端与建站

查看项目

更新于 10-16 03:14

技能介绍

用途:为 Next.js App Router 项目提供质量实践,纠正通用 Node 建议与旧 pages router 经验带来的误导,例如滥用 use client、使用通用 ESLint 而非 Next 规则集、引用已弃用的 next lint 工作流、未测量就“优化”打包体积。本技能不适用于:Next 之外的通用 Node/TS lint(node-lint)、单元/组件测试(node-testing)、库打包(node-packaging)、部署托管,以及编写应用功能本身。

主要能力与使用方式:先审计现状,包括 Next 主版本、next.config.*、lint 配置与 next build 输出作为基线;再按 Next 方式 lint,在扁平配置中使用 eslint-config-next(需核对所装主版本的 next lint 弃用状态),其 RSC/边界规则是关键,不要替换为通用配置;按清单加固 next.config,如 reactStrictMode、类型化路由(按版本核实状态)、images 配置、与部署目标匹配的 output 模式、source-map 策略,均需显式设置;进行边界治理,定位真正违规的 import,保持客户端“孤岛”最小化,数据获取与密钥留在服务端(必要时用 server-only),并加入可捕获回归的 lint 规则;打包优化必须先测量,使用 analyzer 后采取动态导入、静态部分改用服务端组件、可 tree-shake 的导入、next/image 与 next/font,并重新测量、报告差值;每次改动后以 next build 通过为门禁,保持类型与 lint 门禁开启。

输出与限制:产出显式加固的 next.config、生效的 Next 原生 lint、模块顶层无未解释的 use client、针对优化请求的实测打包差值,且 next build 通过,实验性内容需标注。注意 use client 标记的是边界而非修复,放在大组件树顶层会把整棵树发往客户端;水合不匹配通常源于非确定性渲染输入(日期、随机、locale);output: 'export' 会静默禁用服务端功能,应先定部署目标再改配置;Next 主版本迭代快,需针对所装版本重新核对官方文档。技能包含 references/nextjs-playbook.md,提供按版本区分的配置清单、扁平配置 lint 接法、边界与水合清单、打包优化手段及环境变量校验。