Next.js 16.2 — AI 功能到底加了什麼，Turbopack 真的快了嗎？

Next.js 16.2 出了，這次更新的重點放在 AI 相關功能和 Turbopack 效能提升。老實說，看到 Next.js 開始內建 AI 功能我是有點意外的，畢竟這個 framework 一直都很專注在 React SSR 這塊。不過既然 Vercel 本身就在推 AI 服務，整合進 Next.js 也算合理。

AI 功能加了什麼？

這次最大的亮點是新增了 @vercel/ai 的深度整合，主要有幾個方向：

Streaming Response 改進

原本 AI streaming response 在 Next.js 裡面要自己處理 ReadableStream，現在直接內建支援了。新的 AIStreamResponse 可以直接 return，不用再手動處理 stream 的細節：

import { AIStreamResponse } from 'next/ai'

export async function POST(request) {
  const stream = await openai.completions.create({
    model: 'gpt-4',
    stream: true,
    // ...
  })
  
  return new AIStreamResponse(stream)
}

這個改進還不錯，之前要自己包一層確實有點煩。不過說真的，大部分專案還是會用 Vercel 的 AI SDK，這個功能比較像是給那些想要更底層控制的人用。

Server Actions 整合

Server Actions 現在可以直接回傳 streaming response，搭配 useFormStatus 可以做出更好的 loading 體驗。這個我覺得蠻實用的，特別是做那種 AI 生成內容的功能時，可以即時顯示生成進度。

'use server'

export async function generateContent(prompt) {
  const response = await fetch('/api/ai/generate', {
    method: 'POST',
    body: JSON.stringify({ prompt })
  })
  
  return response.body // 直接回傳 stream
}

內建 Token 計算

新增了 calculateTokens helper function，可以預估 prompt 的 token 數量。這個功能對成本控制來說還蠻重要的，之前都要自己串接各家 API 的 token 計算工具。

不過這邊有個問題是，每個 model 的 tokenization 方式不太一樣，Next.js 提供的是通用版本，準確度可能不如各家原生的工具。

Turbopack 效能提升

Turbopack 這次主要改進了幾個地方：

Cold Start 時間

官方數據顯示 cold start 時間減少了 30%，實際測試下來確實有感。我用一個中等規模的專案(大概 50 個頁面)測試，從 npm run dev 到能開始開發的時間從原本的 8 秒左右降到 5 秒多。

這個改進主要來自更好的 dependency resolution 和 module graph 建構。不過老實說，如果你的專案很小(10 個頁面以下)，差異可能不太明顯。

HMR 穩定性

Hot Module Replacement 的穩定性提升了不少，之前偶爾會遇到 HMR 失效要手動 reload 的情況，現在比較少遇到了。特別是 CSS 變更的 HMR，之前常常會整個畫面閃一下，現在改善很多。

Bundle Size 優化

靜態分析的部分也有改進，可以更準確地判斷哪些 code 是 dead code。測試結果顯示，最終的 bundle size 大概能減少 10-15%，雖然不是很驚人，但也算不錯的提升。

開發者體驗優化

錯誤訊息改進

這個我覺得是最實用的改進。之前 Next.js 的錯誤訊息有時候蠻難懂的，特別是 hydration mismatch 的錯誤，現在會提供更具體的建議。

比如說之前遇到 hydration 錯誤，訊息可能就是一堆 React 內部的 stack trace，現在會直接告訴你「可能是因為 localStorage 在 server 端不存在」之類的具體原因。

TypeScript 整合

TypeScript 的 type inference 也有改進，特別是在使用 Server Actions 的時候。現在可以更準確地推斷 form data 的類型，減少需要手動寫 type assertion 的情況。

值得升級嗎？

如果你的專案已經在用 Next.js 15+，我覺得是值得升級的。主要原因：

<h2>延伸閱讀</h2> <ul> <li><a href="/blog/building-nextjs-for-an-agentic-future">Building Next.js for an agentic future</a></li> <li><a href="/blog/coding-agents-reshaping-epd">Coding Agent 正在改變工程、產品、設計的協作方式 — 但改變的不是你想的那個</a></li> <li><a href="/blog/anatomy-of-agent-harness">拆解 Agent Harness — 你以為的 AI Agent 其實 90% 是 harness</a></li> </ul>