Next.js 15已經(jīng)到來，一切比以往更好！

從全新的編譯器到700倍更快的構(gòu)建時間，創(chuàng)建具有卓越性能的全棧Web應(yīng)用從未如此簡單。

讓我們探索v15的最新特性：

1. create-next-app升級：更清晰的UI，700倍更快的構(gòu)建

改進的設(shè)計

從這樣：

變成這樣：

Webpack → Turbopack

Turbopack：世界上最快的模塊打包器（至少他們是這么說的）：

• 比Webpack快700倍
• 比Vite快10倍

現(xiàn)在在v15中，將其添加到你的Next.js項目比以往任何時候都更容易：

2. React編譯器，React 19支持，和用戶友好的錯誤提示

React編譯器就是一個React編譯器（誰能想到呢）。

一個深入理解你的React代碼的現(xiàn)代編譯器。

帶來諸如自動記憶化等優(yōu)化——在絕大多數(shù)情況下消除了對 useMemo 和 useCallback 的需求。

節(jié)省時間，防止錯誤，加快速度。

而且設(shè)置非常簡單：你只需安裝babel-plugin-react-compiler：

npm install babel-plugin-react-compiler

然后在next.config.js中添加這個

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

module.exports = nextConfig;

React 19支持

帶來了客戶端和服務(wù)器端Actions等升級。

更好的hydration錯誤

開發(fā)體驗意味著很多，錯誤消息的有用性在其中扮演著重要角色。

Next.js 15設(shè)置了更高的標準：現(xiàn)在對可能的錯誤修復(fù)方法提供智能建議。

v15之前：

現(xiàn)在：

你知道我過去因這些hydration錯誤遇到過困難，所以這對我來說肯定會是一個無價之寶。

3. 新的緩存行為

不再自動緩存！

對于所有：

• fetch() 請求
• 路由處理程序：GET，POST等
• <Link> 客戶端導(dǎo)航。

但如果你仍然想要緩存fetch()：

// 'cache' 在 v15 之前默認是 'no-store'
fetch('https://example.com', { cache: 'force-cache' });

然后你可以通過一些next.config.js選項緩存其他內(nèi)容。

4. 部分預(yù)渲染（PPR）

PPR在同一頁面中結(jié)合了靜態(tài)和動態(tài)渲染。

通過立即加載靜態(tài)HTML并在同一HTTP請求中流式傳輸動態(tài)部分，大大提高了性能。

import { Suspense } from 'react';
import {
  StaticComponent,
  DynamicComponent,
} from '@app/ui';

export const experimental_ppr = true;

export default function Page() {
  return (
    <>
      <StaticComponent />
      <Suspense fallback={...}>
        <DynamicComponent />
      </Suspense>
    </>
  );
}

你只需要在next.config.js中添加這個：

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

module.exports = nextConfig;

5.next/after

Next.js 15為你提供了一種清晰的方式來分離每個服務(wù)器請求中的必要和非必要任務(wù)

• 必要：身份驗證檢查，數(shù)據(jù)庫更新等
• 非必要：日志記錄，分析等

import { unstable_after as after } from 'next/server';
import { log } from '@app/utils';

export default function Layout({ children }) {
  // 次要任務(wù)
  after(() => {
    log();
  });

  // 主要任務(wù)
  // 從數(shù)據(jù)庫中獲取(fetch())數(shù)據(jù)并渲染
  return <>{children}</>;
}

現(xiàn)在就用experimental.after開始使用：

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

module.exports = nextConfig;

這只是Next.js 15中所有影響深遠的新特性中的5個。

現(xiàn)在就用npx create-next-app@rc獲取它，開始享受顯著改善的構(gòu)建時間和更優(yōu)秀的開發(fā)者體驗。