React19 和 Nextjs15 可否用于生产环境？

大家好，我是双越老师，也是 wangEditor 作者。

我正致力于开发一个 Node 全栈 AIGC 知识库划水AI，包括 AI 写作、多人协同编辑。复杂业务，真实上线，大家可以去注册试用，围观项目研发过程。

开始

前几天我想吧划水AI 项目升级到 React19 和 Nextjs15 ，结果遇到了很多第三方插件的兼容性问题，我就没有强行升级。

Nextjs14 升级 Nextjs15 还是比较简单的，有专门的工具，自动帮你替换代码 nextjs.org/docs/app/bu...

所以，你的项目如果不是很复杂，可以试试能否成功升级，反正不成功也不影响。

那 Nextjs15 可否用于生产环境呢？我专门从 0 新建了一个 Nextjs15 的项目试试。本文就分享一下 Nextjs15 到底有哪些变化，以及第三方插件的兼容性是否会有问题。

React19 的变化

React19 的变化可参考官方文档 react.dev/blog/2024/1... ，也可以参考我之前的博客 React19 升级了哪些 Hook 和 API ？都有什么用？

说实话，React17 18 19 这几个版本的升级，从应用角度已经没有太大的变化了，这些 API 或 Hooks 也许我会用，但不用我也可以通过其他方式解决。

Vue 也一样，web 前端框架/库早几年就已经发展的差不多了，没啥新东西可做了。都在寻找新的方向，如 SSR 全栈。

20 年之前电脑做到了尽头，然后 iPhone 诞生，又开始发展手机，前几年手机也发展的差不多了，现在又在拼 AI ...

精彩的世界是不断变化的，不断有勇敢的人探索出新的东西，带来新的红利。反之僵化的世界大家只能内卷。

Nextjs15 的变化

Nextjs 15 的变化可参考文档 nextjs.org/docs/app/bu...

缓存策略

Nextjs 15 中 fetch 请求，get 请求和客户端渲染结果，通通都默认不缓存，太清爽了。

具体可参考我去年写过一篇文章 Next.js 15 RC 终于把该死的缓存给去掉了！

`cookies` `headers` 改为异步函数

之前 Nextjs 14 中，获取 cookies 和 headers 可以直接执行函数。而现在需要 await 获取。

jsx 复制代码

import { cookies } from 'next/headers'
import { headers } from 'next/headers'
 
// Before
const cookieStore = cookies()
const token = cookieStore.get('token')
const headersList = headers()
const userAgent = headersList.get('user-agent')
 
// After
const cookieStore = await cookies() // 异步获取 cookies
const token = cookieStore.get('token')
const headersList = await headers() // 异步获取 headers
const userAgent = headersList.get('user-agent')

`params` 和 `searchParams` 参数，改为 Promise 类型

params 即 url 里的动态参数。例如我们定义路由规则 /blog/[id]，然后 url 是 /blog/100 ，那这个 100 就是 param id 。这种路由规则在任何一个 web 框架中都有。

searchParams 就是 query ，例如 /blog/100?a=10&b=20 这里的 searchParams 就是 { a: '10', b: '20' }

Nextjs15 开始，定义和获取 params 和 searchParams 都需要使用 Promise 类型和 await 异步获取

同步组件中获取 params ，需要使用 `use` 获取内容

React 服务端组件（RSC）可以写为 async 异步函数，里面可以使用 await 。但客户端组件不可定义为 async 函数，怎么办呢？

使用 React use 函数，这是一个新的用法。文档参考 react.dev/reference/r...

jsx 复制代码

import { use } from 'react'
 
type Params = Promise<{ id: string }>
 
export default function Page(props: {
  children: React.ReactNode
  params: Params
}) {
  const params = use(props.params) // 使用 use 可获取 Promise 的值
  const id = params.id
}