Next.js 15 來了,全新的編譯器、700倍的構(gòu)建速度提升

Next.js 15 來了,讓全棧Web應(yīng)用開發(fā)變得比以往任何時(shí)候都更簡(jiǎn)單高效!
全新的編譯器、700倍的構(gòu)建速度提升,創(chuàng)建高性能的全棧Web應(yīng)用從未如此輕松。讓我們一起來探索一下 v15 的最新特性:
1.create-next-app 升級(jí):更簡(jiǎn)潔的UI,700倍更快的構(gòu)建速度

- Webpack 升級(jí)為 Turbopack:世界上最快的模塊打包器(官方如此宣稱):比 Webpack 快 700 倍比 Vite 快 10 倍。
- 隨著 v15 的發(fā)布,將 Turbopack 添加到你的 Next.js 項(xiàng)目中變得前所未有的簡(jiǎn)單:
npx create-next-app@rc這個(gè)命令不僅會(huì)幫你生成一個(gè)新的 Next.js 項(xiàng)目,還會(huì)自動(dòng)配置好 Turbopack,讓你直接體驗(yàn)極速構(gòu)建的快感。

2. React 編譯器、React 19 支持和更友好的錯(cuò)誤提示
React 編譯器是一個(gè)現(xiàn)代的 React 編譯器,它能深入理解你的 React 代碼,帶來自動(dòng)記憶化等優(yōu)化,大多數(shù)情況下不再需要手動(dòng)使用 useMemo 和 useCallback。它可以節(jié)省時(shí)間、預(yù)防錯(cuò)誤、加快速度。

并在 next.config.js 中添加:

React 19 支持:
引入了客戶端和服務(wù)器端的 Actions。
更好的水合錯(cuò)誤處理:
開發(fā)過程中的錯(cuò)誤信息非常重要,Next.js 15 提供了智能的錯(cuò)誤修復(fù)建議,這對(duì)開發(fā)者的開發(fā)體驗(yàn)有很大提升。
以前的錯(cuò)誤提示:

現(xiàn)在的錯(cuò)誤提示:

這些智能提示大大減少了開發(fā)者解決錯(cuò)誤的時(shí)間。
3. 新的緩存行為
在 Next.js 15 中,不再自動(dòng)緩存以下內(nèi)容:
- fetch() 請(qǐng)求。
- 路由處理程序:GET、POST 等。
<Link> 客戶端導(dǎo)航。
如果你仍然希望緩存 fetch() 請(qǐng)求,可以在 next.config.js 中進(jìn)行配置:

4. next/after:任務(wù)分離的新方式
Next.js 15 提供了一個(gè)全新的 next/after 功能,讓你在每個(gè)服務(wù)器請(qǐng)求中清晰地分離必要任務(wù)和非必要任務(wù):
- 必要任務(wù):身份驗(yàn)證檢查、數(shù)據(jù)庫(kù)更新等。
- 非必要任務(wù):日志記錄、分析等。

現(xiàn)在你可以使用 experimental.after 輕松實(shí)現(xiàn)這一功能:

5.部分預(yù)渲染 (Partial Prerendering, PPR)
部分預(yù)渲染 (PPR) 在同一頁面中結(jié)合了靜態(tài)和動(dòng)態(tài)渲染。通過即時(shí)加載靜態(tài) HTML 并在同一 HTTP 請(qǐng)求中流式傳輸動(dòng)態(tài)部分,極大地提升了性能。

要啟用 PPR,只需在 next.config.js 中添加以下配置:

結(jié)束
Next.js 15 帶來了諸多令人興奮的新功能和性能提升,讓開發(fā)者可以更高效地構(gòu)建高性能的全棧Web應(yīng)用。如果你還沒有體驗(yàn)過這些新特性,現(xiàn)在就開始吧!
npx create-next-app@rc這就是 Next.js 15 帶來的五大變革性新功能。你是否已經(jīng)迫不及待想要試試這些新特性了呢?


































