Next.js 14中Middleware编译晚于应用？与文档执行顺序是否冲突？

你看到的日志顺序是编译阶段的执行顺序，和文档里说的请求处理阶段的执行顺序是两码事，完全不冲突。

先搞懂两个阶段的区别： #

• 编译阶段：Next.js启动时会优先预编译页面相关的Server Components，如果你在Server Component的顶层写了console.log（不是组件函数内部的代码），这段代码会在编译时就执行，所以会先打印日志。而Middleware是懒编译的——只有当第一个匹配它的请求进来时，Next.js才会去编译它，所以你看到Middleware的编译日志和顶层log都在后面。
• 请求处理阶段：当用户实际发起请求（比如访问/）时，执行顺序严格遵循官方文档的规则：
  1. next.config.js 中的 headers
  2. next.config.js 中的 redirects
  3. Middleware（处理重写、重定向等）
  4. next.config.js 中的 beforeFiles（重写）
  5. 文件系统路由匹配
  6. next.config.js 中的 afterFiles（重写）
  7. 动态路由匹配
  8. next.config.js 中的 fallback（重写）
     最后才会执行Server Component的渲染逻辑（组件函数内部的代码）。

验证方法： #

你可以做个小测试：

• 在middleware.ts里直接写console.log("middleware 处理请求中")
• 在Server Component的组件函数内部写console.log("Server Component 渲染中")
  当你刷新页面发起请求时，控制台会先打印middleware 处理请求中，再打印Server Component 渲染中，这才是真实的请求执行顺序。

内容的提问来源于stack exchange，提问作者Magnus