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 重定向、www 向 non-www重定向、https、gzip，都可以交给 nginx

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

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

   脚本 deploy.sh

   糊涂啊，明明可以本地用 docker 构建，再提取出构建产物，上传到云上的。晚一些补充吧。

   见 个人站点搭建记录

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