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

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

Next.js 14 主要變化：

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

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

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

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

重新驗證緩存數(shù)據(jù)

支持簡單的函數(shù)調(diào)用

本地支持表單

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

• Turbopack 通過 5000 項集成測試

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

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

• Server Actions

在 Next.js 14 中，Next.js 團隊通過穩(wěn)定版本的 Server Actions 改進了開發(fā)者在編寫數(shù)據(jù)變更方面的體驗。

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

現(xiàn)在，只需在 React 組件中定義一個函數(shù)，就能在服務器上安全地執(zhí)行操作。

下面是一個簡易示例：

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>
  );
}

這不僅減少代碼量，還減少了更改數(shù)據(jù)和重新渲染頁面所需的網(wǎng)絡(luò)往返次數(shù)，從而提升用戶體驗。

• 部分預渲染 (Partial Prerendering)

Next.js 團隊正在為 Next.js 開發(fā)的” 部分預渲染 “是一種針對具有快速初始靜態(tài)響應的動態(tài)內(nèi)容的編譯器優(yōu)化。

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