作為領(lǐng)先的現(xiàn)代前端框架，Next.js 15引入了一系列創(chuàng)新功能和改進(jìn),旨在提高開發(fā)效率??并增強(qiáng)應(yīng)用性能?。

圖片

1.支持React 19 RC

Next.js 15版本現(xiàn)在支持React 19 RC,這意味著開發(fā)者可以立即體驗(yàn)React最新版本帶來的新特性。React 19 RC在客戶端和服務(wù)器端都引入了新功能,如Actions,這將大大簡化我們的代碼邏輯。

更新指南:

npm i next@rc react@rc react-dom@rc eslint-config-next@rc

2. 實(shí)驗(yàn)性React編譯器

React編譯器是由Meta團(tuán)隊(duì)開發(fā)的實(shí)驗(yàn)性工具???。它理解JavaScript語義和React規(guī)則,自動(dòng)優(yōu)化你的代碼。這不僅提升了應(yīng)用性能?,還簡化了開發(fā)過程??。

安裝 babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

然后在next.config.js中配置 experimental.reactCompiler:

const nextConfig = {
  experimental: {
    reactCompiler: true,
  },
};

module.exports = nextConfig;

3. 部分預(yù)渲染

Next.js 15引入了名為部分預(yù)渲染的新布局和頁面配置功能???。這個(gè)實(shí)驗(yàn)性功能允許開發(fā)者逐步采用新的布局和頁面配置,在控制頁面渲染策略方面提供更大的靈活性??。

要使用部分預(yù)渲染功能,需要在 next.config.js 中設(shè)置配置:

const nextConfig = {
  experimental: {
    ppr: 'incremental',
  },
};

module.exports = nextConfig;

4. next/after API

另一項(xiàng)試驗(yàn)性實(shí)驗(yàn)性功能是 next/after,這是一個(gè)允許我們在響應(yīng)完成流式傳輸后執(zhí)行代碼的API。這給了開發(fā)者更多的控制權(quán),并能夠更精細(xì)地管理應(yīng)用生命周期??。

要使用它,需要在 next.config.js 中配置 experimental.after:

const nextConfig = {
  experimental: {
    after: true,
  },
};

module.exports = nextConfig;

5. create-next-app更新

create-next-app工具也進(jìn)行了更新,采用了現(xiàn)代設(shè)計(jì)并增加了新功能,如啟用帶有Turbopack的本地開發(fā)??。

運(yùn)行 create-next-app,會(huì)出現(xiàn)一個(gè)新的提示,詢問您是否要為本地開發(fā)啟用Turbopack(默認(rèn)為否)??。

要啟用Turbopack,使用:

npx create-next-app@rc --turbo

6. 外部包捆綁

Next.js 15為Pages Router添加了新的配置選項(xiàng),使外部包的捆綁更加靈活和強(qiáng)大。這將幫助我們更好地管理應(yīng)用依賴項(xiàng)并提高應(yīng)用加載速度。

捆綁外部軟件包可以提高應(yīng)用程序的冷啟動(dòng)性能。App Router 外部軟件包默認(rèn)捆綁在 ，您可以使用新的 serverExternalPackages 配置選項(xiàng)。

為了統(tǒng)一 APages 路由器之間的配置，我們引入了一個(gè)新選項(xiàng) bundlePagesRouterDependencies 以匹配 App 路由器的默認(rèn)自動(dòng)捆綁。

const nextConfig = {
  // Automatically bundle external packages in the Pages Router:
  bundlePagesRouterDependencies: true,
  // Opt specific packages out of bundling for both App and Pages Router:
  serverExternalPackages: ['package-name'],
};

module.exports = nextConfig;

7. 緩存更新

在新版本中,Next.js不再緩存fetch請求、GET路由處理程序和客戶端導(dǎo)航??。這一變化有助于避免常見的緩存問題,確保我們的應(yīng)用保持響應(yīng)性和最新狀態(tài)??。

Next.js 15的發(fā)布無疑將為前端開發(fā)帶來新的活力??。它不僅提高了開發(fā)效率??,還增強(qiáng)了應(yīng)用性能和用戶體驗(yàn)??。如果您是前端開發(fā)者,Next.js 15絕對值得一試。