浏览器找不到该文件 ​

在 Next.js 中，如果设置 "use server"; 时，浏览器会找不到该文件，因为 Next.js 会将文件打包到服务器端，而不是客户端。

Next14 迁移到 Next15 ​

What Nextjs15 link ​

Turbopack dev is now stable link

Support dev --turbo

• Up to 76.7% faster local server startup.
• Up to 96.3% faster code updates with Fast Refresh.
• Up to 45.8% faster initial route compile without caching (Turbopack does not have disk caching yet).

Upgrade guide link ​

PR: link

Upgrade note ​

• Next15 support both react19 and react18, so you don't need to upgrade react version.
• But you need to override package.json react and react-dom version to 18.x in order to support next15 use same react version.

Check guide ​

1. dev/dev --turbo,build,start,lint command success
2. type check and lint 0 error

升级报错 ​

Eslint conflict 报错 ​

Error: Plugin "react-hooks" was conflicted between ".eslintrc.json#overrides[0] » eslint-config-next/core-web-vitals » /Users/winches/Desktop/company/NextUI/nextui-pro/node_modules/.pnpm/eslint-config-next@15.0.3_eslint@7.32.0_typescript@5.3.3/node_modules/eslint-config-next/index.js » plugin:react-hooks/recommended" and ".eslintrc.json » plugin:react-hooks/recommended".

原因，eslint-config-next 升级后，默认会使用 react-hooks，与项目内已存在的冲突，所以手动去掉 extends 的 react-hooks。

nextjs/route 和 react-router 的区别 ​

路由更新的触发方式

React Router：

React Router 的路径变化仅仅依赖于 JavaScript 在浏览器端的控制。通过调用 history.push() 或者使用 组件，React Router 会拦截浏览器的默认跳转行为，并通过虚拟 DOM 来更新视图。

在 SPA 中，只有视图更新，没有完整的页面刷新。

Next.js：

Next.js 在路由更新时，客户端渲染（CSR）和服务端渲染（SSR）是有区别的。客户端渲染时（例如点击一个 或使用 next/router.push()），它会使用 React 进行路由切换。

如果启用了服务端渲染，当你导航到一个新的页面时，Next.js 会通过服务器请求新的内容并渲染该页面，再发送到客户端。

这种方式使得 Next.js 在处理路径变化时，能够更好地支持 SEO 和首屏加载优化。

RSC 是什么 ​

React Server Components（RSC） 客户端并不会直接请求“组件”，而是请求一个特殊的数据格式（RSC payload），React 客户端运行时会根据这个 payload 重新组装出组件树。

下面我分步骤详细讲一下整个流程 👇

🧩 一、不是请求组件代码，而是请求「React Payload」 ​

当客户端（浏览器）导航到一个页面或触发更新时：

1. React 在服务器上执行 Server Components 这些组件可以访问数据库、文件系统等，只生成纯粹的「React 元素描述」数据。

2. React 把这个结果序列化成特殊的 JSON-like 数据（RSC Payload） 它里面记录了：

   • 哪些组件要渲染
   • 每个组件的 props、结构
   • 哪些子组件是客户端组件（需要在浏览器执行）

3. 浏览器通过 React runtime 接收到这个 Payload 客户端 React 读取这个数据，把服务器组件和客户端组件组合在一起，渲染出完整 UI。

⚙️ 二、示意图流程（逻辑） ​

浏览器访问 /page
      ↓
Next.js（或 React 服务器）
      ↓
执行服务器组件（Server Components）
      ↓
生成 RSC Payload（不是 HTML）
      ↓
返回给浏览器
      ↓
React 客户端 runtime 解析 Payload
      ↓
重新组装 React 树（客户端组件 + 服务端渲染结果）
      ↓
渲染 UI

📦 三、RSC Payload 是什么样的？ ​

它不是 HTML，也不是普通 JSON，而是 React 定义的一种内部格式，比如：

[
  '$',
  'div',
  null,
  { children: ['Hello ', ['$', 'b', null, { children: 'world' }]] }
]

React 客户端 runtime 读到它，会重新“复原”成 React 元素：

<div>Hello <b>world</b></div>

🚀 四、与传统 SSR / CSR 的区别 ​

🧠 五、举个例子（Next.js 内部实现） ​

在 Next.js App Router 中，当客户端导航到一个新页面时：

1. Next.js 会向 /react 这样的内部 API 发请求 （例如 /react?flight，这是它传输 RSC payload 的接口）
2. 服务器执行 RSC 树，返回 React Payload
3. 客户端 React runtime 解析这个 Payload 并更新页面。

传统的 SSR ​

非常好，这个问题问得很关键 👍 理解 传统 SSR（Server-Side Rendering） 和 RSC（React Server Components） 的区别， 就能清楚知道 React 为什么要搞 RSC 这套新机制。

⚙️ 一、传统 SSR 的核心流程 ​

在传统 SSR（服务器端渲染） 中，流程是这样的 👇

🧱 1️⃣ 服务器渲染 HTML ​

当用户访问页面时：

• 服务器运行 React 代码（通常使用 ReactDOMServer.renderToString()）；
• 把整个 React 组件树“渲染成 HTML 字符串”；
• 把这段 HTML 返回给浏览器。

🧭 2️⃣ 浏览器显示 HTML（首屏可见） ​

浏览器一收到 HTML，就能立即显示页面（这就是 SSR 的首屏快）。

⚡️ 3️⃣ 浏览器下载 JavaScript Bundle 并「Hydrate」 ​

为了让页面变得“可交互”（按钮能点击、输入框能响应等）：

• 浏览器下载整个 React 应用的 JS；
• React 在浏览器中重新执行一遍组件逻辑；
• 把事件监听等“激活”绑定到现有的 DOM 上（这一步叫 Hydration）。

🔁 二、传统 SSR 的数据流示意 ​

Client 请求页面
    ↓
Server 运行 React 组件 (renderToString)
    ↓
生成 HTML + 内联数据（JSON）
    ↓
返回给 Client
    ↓
Browser 显示 HTML（静态）
    ↓
Browser 下载 React JS Bundle
    ↓
React hydrate 页面

🧠 三、SSR 的优缺点 ​

📦 四、RSC 与 SSR 的关键区别 ​

🎯 五、一个类比 ​

📊 六、流程图区别（简化版） ​

传统 SSR：
React (Server) ─▶ HTML ─▶ Browser 渲染 + Hydration

RSC：
React (Server) ─▶ React Payload ─▶ Browser React 组合 + 局部 Hydration