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

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

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

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

改進(jìn)的設(shè)計(jì)

從這樣：

變成這樣：

Webpack → Turbopack

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

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

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

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

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

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

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

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

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

npm install babel-plugin-react-compiler

然后在next.config.js中添加這個(gè)

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

module.exports = nextConfig;

React 19支持

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

更好的hydration錯(cuò)誤

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

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

v15之前：

現(xiàn)在：

你知道我過去因這些hydration錯(cuò)誤遇到過困難，所以這對(duì)我來說肯定會(huì)是一個(gè)無價(jià)之寶。

3. 新的緩存行為

不再自動(dòng)緩存！

對(duì)于所有：

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

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

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

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

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

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

通過立即加載靜態(tài)HTML并在同一HTTP請(qǐng)求中流式傳輸動(dòng)態(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中添加這個(gè)：

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

module.exports = nextConfig;

5.next/after

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

• 必要：身份驗(yàn)證檢查，數(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中所有影響深遠(yuǎn)的新特性中的5個(gè)。

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