Next.js 完整框架:把路由、渲染、取数、缓存和部署拆成五个决定。先确定代码执行位置,再决定数据新鲜度,最后用测量选择优化。
前置:已有能启动的 Next.js App Router + TypeScript 项目,知道客户端组件与事件处理器。本文包含多个独立片段,Context、Zustand、查询库与表单部分不是一套可直接拼接的应用;先只接入下文 Counte
先决定数据在服务端还是客户端取得,再考虑缓存。请求成功、HTTP 成功、JSON 格式合法和业务数据有效是不同检查。
Tailwind 把常用 CSS 规则表达为类名。布局仍受盒模型、可用宽度和继承规则约束;加类名不能替代理解这些规则。
URL 决定页面身份,嵌套布局决定共享范围。路由参数、查询参数与组件内部状态用途不同;需要分享或刷新保留的筛选往往属于 URL。
TypeScript 在开发时检查代码关系,不会自动验证服务器返回的 JSON。把任意数据断言成 User 只是告诉编译器信任你。
App Router 用文件组织路由。page 定义页面入口,layout 提供共享外壳;组件函数返回的是界面描述。
先确认 Node、包管理器和工程目录,再创建应用。锁文件记录依赖解析结果,脚手架版本与最终依赖版本并不是同一个概念。