[RFC] 065 - 升级到 Next 15 + React 19

[arvinxx]

背景

Next 15 于 2024.10.21 发布正式版： https://nextjs.org/blog/next-15 ，并可以和 react 19 一起使用。我们需要在合适的时间将 next 版本升级到 15 。

思路

之前在 next 出 15@rc 时已经有了一个测试 PR: #2630 ，当时测下来直接构建是没问题的。但 next 15 正式版带来了几个 breaking change:

第一个也是最大的 Breaking Change ，是所有 Page 相关的 api Request 都变成异步的了：

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

牵涉到的范围很广：

• cookies
• headers
• draftMode
• params in layout.js, page.js, route.js, default.js, generateMetadata, and generateViewport
• searchParams in page.js

而我们的亮暗色主题切换 / 多套 Layout / 多语言， 都牵扯到 cookies 和 headers，因此变动算比较大的。

2. Cache: 所有的 fetch 都默认不缓存了，这个可能会对 vercel 上的用量有影响，感觉需要更新后观察一段时间（7-15天），然后再确认哪些应该再重新缓存住。

3. React 19 ： 这个还没发正式版，所以升级 next 15 的时候应该会先不升级 react，而且测了下 antd 目前也不支持 React19（不兼容 react@19 ant-design/ant-design#51339 ），等发布正式版并且相关配件稳定后再升。

这样的话整个顺序可能就是先升级 next15，完成兼容性改造，然后过一段时间后，再升级 react19

进展

前置改造工作

• ♻️ refactor: fix dynamic import in rsc #4445
• ♻️ refactor: move responsive to server utils folder #4447

改造异步 api request

• 简单的 cookie/headers 改造与 discover 部分页面的
  • params/searchParams ♻️ refactor: refactor cookie/headers to async mode #4459
• 需要改造全量的 params/searchParams
  • ♻️ refactor: refactor page params to adapt next15 breaking change #4904
  • ♻️ refactor: refactor async params route to adapt next15 breaking change #4905
  • ♻️ refactor: refactor layout props #5093

改造全量的 server layout/server page 用法（isMobile 判断逻辑）

• ♻️ refactor: refactor to use async headers() #5097

升级 nextjs 15

• ✨ feat: upgrade to next15 and react19 #4450

[ffha]

Next 15的React最小版本要求是19

[ffha]

“The minimum versions of react and react-dom is now 19.”

[arvinxx]

发现了，所以短期内应该升不了了

[arvinxx]

next15 Turbopack 编译效果对比

评测机器：MacBook Pro 16'' Apple M1 Max 64G

编译页面	webpack (14.2.8)	turbopack(15.0.4)	编译耗时
启动	Ready in 3.1s	Ready in 1482ms	-54.8%
/	31.8s (20818 modules)	14.3s	-55.0%
/chat	33.5s (30930 modules)	19.1s	-43.0%
/welcome	8s (31115 modules)	2.8s	-65.0%
/discover	18.9s (32957 modules)	3.5s	-81.4%

[arvinxx]

内存用量测试

默认情况 604MB

Before 447MB

感觉可能测试有点问题，需要再验证下

[arvinxx]

antd 5.22.6 开始兼容 react19 ，通过一个临时方法修复（V6 应该会删除），这样一来阻止我们升级 next15 的最后一个阻碍也扫清了

"use client";

import { useEffect } from "react";
import { unstableSetRender } from "antd";
import { createRoot } from "react-dom/client";

const AntdV5MonkeyPatch = () => {
  useEffect(() => {
    unstableSetRender((node, container) => {
      const root = createRoot(container);
      root.render(node);
      return async () => {
        root.unmount();
      };
    });
  }, []);
  return null;
};

export default AntdV5MonkeyPatch;