Next.js 15 迁移指南

[HIGH] async request API

会 break 掉大部分 layout 和 page 的代码，需要重构。

https://nextjs.org/blog/next-15#async-request-apis-breaking-change

cookies()、params、headers() 全都变成 async 的了，重构地狱。

// before

function ServerComponent(props) {
  const token = cookies().get("token");
  const { appId } = props.params;
  const contentType = headers().get("Content-Type");
}

// after
async function ServerComponent(props) {
  // 全都要 await...
  const token = (await cookies()).get("token");
  const { appId } = await props.params;
  const contentType = (await headers()).get("Content-Type");
}

因为这个情况，还是将所有的 page 和 layout 视为 server component 比较好维护，而已经转成 client component 的 page 和 layout 就只能想一个约定，把 client 部分的代码再拆一个文件了，而这个做法可能会对文件结构产生影响，需要考虑如何变更

[LOW] instrumentation stable 了

https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation

之后可以在 src 文件夹下放一个 instrumentation.ts，用于前端项目的可观测性。

或许是更好的地方放 sentry：

// instrumentation.ts

export async function onRequestError(err, request, context) {
  await fetch("https://...", {
    method: "POST",
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { "Content-Type": "application/json" },
  });
}

export async function register() {
  // init your favorite observability provider SDK
}

文档还介绍了另一个用例，用于在运行 route handler 之前 setup 环境，可以理解为 jest 的 beforeEach 或者 electron 的 preload 脚本。

[MEDIUM] turbopack stable 了

turbopack 强制使用了 lighteningcss (而非 postcss)，其 parse 明显比 postcss 严格很多，有待之后调研。

不过 prod 上还不支持 turbopack，引入之后不光 server 和 client 不一致，dev 和 prod 也不一致了 (vite 是吧…)。

直接在 dev scripts 后面加上 --turbo 即可试用。

[MEDIUM] 构建性能优化

众所周知 Next.js 开始做 perf 的时候就意味着很多行为都要变了。

• RSC 支持 HMR 了
• 其他是 static export 的更新，与 Dify 无关

[MEDIUM] 全局 CSS 的分块策略更新

https://github.com/vercel/next.js/pull/67373

14.2 引入的 CSS 分块把全局 CSS 也分块打包，现在的策略似乎是只将 CSS Module 分块，所以现在对项目应该没有影响，但是不能确定 Next.js 的实现是对的，所以需要测试。

[LOW] bundler 大量改进

了解即可，在 monorepo 里不要使用 next 自带的功能 bundle，也不要再使用 next/dynamic 了，感觉他们自己都维护不了了。