Next.js 13 升 14 记录

前几天突然发现 Next.js 出到 14 了,那肯定要跟啊,就把博客升级了一下,前端业务代码很顺利,一天就搞定了,运维花了我大概三四天,痛苦😭特此记录

Next 14 优缺点

优点

最大的优点就是,极大地提高了开发时体验。

原来从运行 pnpm run dev 到页面可交互,大概需要 30+s(没算过,大致估计),但是升级 14 之后,20s内就能交互了。切换页面速度也有了很大提高,首次切换至一个新的动态路由,大概需要构建 10-20s,再次进入同一个动态路由的其他页面,就几乎是秒进了(之前每进一个路由都需要不短的构建时间)(md 原来是我电脑太拉了,用公司的 mac 3s 多就 OK 了。。。)

(由于项目需要使用 webpack,所以开发时很慢,swc 估计能快一些)

缺点

node 版本最低要求 18.17,腾讯云轻量服务器宝塔 centos 版本最高 7.9,不支持那么高的 node 版本,搞得我必须得重装系统。我这种 linux 二把刀,本地捣鼓了一天虚拟机后,云上重装 + 各种配置又花了两三天,见 hyper-v ubuntu 22.04 装机记录。加上 https + 数据库 + 数据库定时备份,之前宝塔都一键配置,到了这边都得自己弄,简直要了我半条命。

P.S. 我本地装的虚拟机是可视化桌面,结果云上的却是命令行,幸好版本一致没出什么幺蛾子。

P.P.S. 新机装好,第一时间试了线上 build,不出所料,还是 build 不动,一瞬间 cpu 飚到 97 还不止,然后就命令行都卡死了,ctrl+C 都无效了。。。

升级过程

前端业务代码

前端业务代码其实没什么好说的,由于这个项目比较新,我时不时就会运行 pnpm up --latest,这次也差不多,直接更新依赖之后,哪里报错改哪里,一共也就不到十处报错,改了就好了,有部分从报错提示中看不出原因的,搜一搜也就改了。

最隐晦的一条是,命令行报错 Cannot set properties of undefined (setting 'inTable'),没有其他任何提示,也没有报错上下文,最后搜到,原来是 remark-gfm 4.0 依赖了 unified 11, 其他大量生态没有更新该依赖,导致版本不兼容,只能回退到 remark-gfm 3.0 了。

TypeError: Cannot read properties of undefined (reading 'inTable') in v4.0.0 发现相同的问题,然后报 Duplicate of xxx,然后一直追溯了五六篇 issues,一直到 Error: No overload matches this call after library update,感觉很有趣。

其他的处理一方面参考 Next.js changelog,一方面报错的栈也会给出不少信息,所以可以说整个过程水到渠成,没有花费什么力气

部署

相关阅读:mysql 从安装到连接

之前在宝塔上部署,数据库是一键生成的,自动备份是一键生成的,SSL 是一键申请部署自动续期的,nginx 是一键生成的。没了宝塔,什么都要自己弄。

  1. 数据库配置

    创建及新建用户就不说了;自动备份数据库是必须的,网上随便一搜一大把,也就不说了

    • 需要允许远程访问,这篇 ubuntu mysql设置远程访问 是讲的比较完善的,你应该修改 /etc/mysql/mysql.conf.d/mysqld.cnf 文件,添加 bind-address=0.0.0.0

      其他回答,几乎 80% 都是说修改 /etc/mysql/conf.d/mysql.cnf 或其他类似文件的,但那是没用的,因为:

      # /etc/mysql/my.conf 设置 bind-address 是没有用的
      bind-address=0.0.0.0 # 这儿没用,会被下面覆盖
      # 这里 include 了一个 mysqld.cnf 文件,其内包含了 bind-address=127.0.0.1 会把上面的配置覆盖掉
      !includedir /etc/mysql/mysql.conf.d/
      
  2. nginx 配置

    我们知道 Next.js 起了一个服务,通常会给它配置 3000 端口,80/443 进来的流量,可以通过 nginx 来配置反向代理,同时,http 重定向、wwwnon-www重定向、httpsgzip,都可以交给 nginx

    抄着 chatgpt,搞了一份配置,仅供参考吧

  3. 本地虚拟机构建后发到云上并重启

    脚本 deploy.sh


下一期讲讲重构到 Next.js Route Groups 的经过

如非特别声明,本站作品均为原创,遵循【自由转载-保持署名-非商用-非衍生 创意共享 3.0 许可证】。

对于转载作品,如需二次转载,请遵循原作许可。