Next.js 15已經到來，一切比以往更好！

從全新的編譯器到700倍更快的構建時間，創建具有卓越性能的全棧Web應用從未如此簡單。

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

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

改進的設計

從這樣：

變成這樣：

Webpack → Turbopack

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

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

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

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

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

一個深入理解你的React代碼的現代編譯器。

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

節省時間，防止錯誤，加快速度。

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

npm install babel-plugin-react-compiler

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

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

module.exports = nextConfig;

React 19支持

帶來了客戶端和服務器端Actions等升級。

更好的hydration錯誤

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

Next.js 15設置了更高的標準：現在對可能的錯誤修復方法提供智能建議。

v15之前：

現在：

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

3. 新的緩存行為

不再自動緩存！

對于所有：

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

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

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

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

4. 部分預渲染（PPR）

PPR在同一頁面中結合了靜態和動態渲染。

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

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為你提供了一種清晰的方式來分離每個服務器請求中的必要和非必要任務

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

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

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

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

現在就用experimental.after開始使用：

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

module.exports = nextConfig;

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

現在就用npx create-next-app@rc獲取它，開始享受顯著改善的構建時間和更優秀的開發者體驗。