Vercel 公司在 Next.js Conf 2023 上宣布了 Next.js 14。

Vercel 是流行的開源前端框架 Next.js 背后的公司，Next.js 提供了包括服務器端渲染和為 Web 應用程序生成靜態網站在內的功能。Vercel 作為一個開放的云平臺提供了網站托管服務，讓開發者能夠在上面開發、預覽和發布 Web 應用，同時優化了前端開發者的開發和部署體驗。

Next.js 14 主要變化：

• Turbopack: App & 頁面路由通過了 5000 項測試

本地服務器啟動速度提升 53%

使用 Fast Refresh 進行代碼更新的速度提升 94%

• Server Actions (Stable): 漸進式的增強突變

重新驗證緩存數據

支持簡單的函數調用

本地支持表單

• Partial Prerendering (Preview): 快速初始化靜態響應 + 流式動態內容
• Next.js Learn (New): 針對 App Router、身份驗證、數據庫等內容的全新免費課程

• Turbopack 通過 5000 項集成測試

底層采用 Rust 編寫的構建引擎 Turbopack 已通過 next dev 的 5,000 項集成測試，這些測試包括 7 年的錯誤修復。

Vercel 稱開發者現在應該使用 next dev -turbo 會得到更快、更可靠的性能。該公司還表示，一旦 Turbopack 所有測試都通過，它將進入穩定狀態（目前通過了 90% 的測試）。

• Server Actions

在 Next.js 14 中，Next.js 團隊通過穩定版本的 Server Actions 改進了開發者在編寫數據變更方面的體驗。

Server Actions 允許開發者定義異步服務器函數，使用 Server Actions 來重新驗證緩存數據、重定向到不同的路由、設置和讀取 cookie 等等。

現在，只需在 React 組件中定義一個函數，就能在服務器上安全地執行操作。

下面是一個簡易示例：

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

這不僅減少代碼量，還減少了更改數據和重新渲染頁面所需的網絡往返次數，從而提升用戶體驗。

• 部分預渲染 (Partial Prerendering)

Next.js 團隊正在為 Next.js 開發的” 部分預渲染 “是一種針對具有快速初始靜態響應的動態內容的編譯器優化。

Partial Prerendering 基于十年來對服務器端渲染 (SSR)、靜態網站生成 (SSG) 和增量靜態重驗證 (ISR) 的研究和開發。