next是一个基于react的全栈框架Next.js 诞生于2016年10月25日由 Guillermo Rauch创立可以直接在一个项目中写请求和页面代码最后通过水合的方式渲染出界面。在现代开发中next算是前后端开发的一种融合因为他支持ssr渲染的同时也支持界面的状态管理无疑减少了页面首屏加载速度。在未来世界的开发中next已经成为一种较为主流的全栈开发框架。本人使用了vscode(IDE)next(框架)github(代码托管)resend邮件发送vercel代码部署neon数据库管理)zustand状态管理开发了一个小型的系统。说一说大致的开发流程。1.主要安装的库ant-design/nextjs-registry: ^1.3.0,//同步style渲染这里也是一个坑点neondatabase/serverless: ^1.1.0,//主要用在数据库连接vercel/postgres: ^0.10.0,//vercel连接antd: ^6.4.5,//组件库bcryptjs: ^3.0.3,//密码加密jose: ^6.2.3,//token生成next: 16.2.9,react: 19.2.4,react-dom: 19.2.4,resend: ^6.16.0,//邮件发送 每天免费100次zustand: ^5.0.14//状态管理上面就是我用到的库。因为Next内置了tailwind css支持 所以可以直接使用tailwind 样式。说一说遇到的坑点。1.页面进入时antd样式出现闪烁后偏移首先是我引入了antd的组件我在next里面使用了items-center样式但是我发现我引入的antd之中的Result组件在进入界面时从左边偏移到了右边排除网络问题。出现上述变化的原因和next的水合机制有关antd 用的是 CSS-in-JSant-design/cssinjs它的样式是在组件渲染时通过 JS 动态计算并插入 style 标签的如果没有配置 AntdRegistry这个动态插入的过程在 SSR 阶段根本不会发生——因为 SSR 只是把组件渲染成 HTML没有真正执行 antd 内部那套收集样式规则的逻辑、在水合阶段才会调用 就出现了延迟渲染 为了解决这个问题 所以用AntdRegistry将js计算样式的时间提前。笼统来说是因为ssr渲染导致antd的样式插入还没执行就已经出现了界面所以后续水合前端代码就发现不对。使用AntdRegistry将样式注入提前就解决了这个问题。2.本地请求卡死这是困惑我最大的点因为当时我的本地服务器请求一直是pending状态控制台也没有任何报错最开始以为是我连接的平台比如vercel,resend之类的环境变量过期了但是检查了一遍发现并不是。是因为缓存问题我的.next可能在编译过程中产生了错误文件但是这个错误一直是卡死无法执行下去的所以才会一直pending,而且这种错误在页面执行过程中不会被捕捉到。只需要删除旧的.next缓存文件然后重新run即可。