Next.js 14.1 | Next.js 框架

Next.js 14.1 包含開發者體驗改進，包括

改進的自行託管： 新文件和自訂快取處理器
Turbopack 改善： 5,600 個測試通過 next dev --turbo
DX 改善： 改進的錯誤訊息、pushState 和 replaceState 支援
平行 & 攔截路由： 根據您的意見回饋修正 20 個錯誤
next/image 改善： <picture>、美術指導和深色模式支援

立即升級或開始使用

終端機

npx create-next-app@latest

改進的自行託管

我們聽取了您的意見回饋，希望能更清楚地了解如何使用 Node.js 伺服器、Docker 容器或靜態匯出自行託管 Next.js。我們已全面修訂關於自行託管的文件，內容涵蓋：

在 Next.js 14.1 中，我們也穩定了為增量靜態再生 (ISR) 和 App Router 更精細的資料快取提供自訂快取處理器的功能

next.config.js

module.exports = {
  cacheHandler: require.resolve('./cache-handler.js'),
  cacheMaxMemorySize: 0, // disable default in-memory caching
};

當使用容器協調平台（如 Kubernetes）時，自行託管時使用此設定非常重要，因為每個 Pod 都會有快取的副本。使用自訂快取處理器可讓您確保託管 Next.js 應用程式的所有 Pod 之間的一致性。

例如，您可以將快取值儲存在任何地方，例如 Redis 或 Memcached。我們要感謝 @neshca 提供的 Redis 快取處理器轉接器和範例。

Turbopack 改善

我們持續專注於本地 Next.js 開發的可靠性和效能

可靠性： Turbopack 通過整個 Next.js 開發測試套件，並在 Vercel 的應用程式上進行實測
效能： 改善 Turbopack 初始編譯時間和快速重新整理時間
記憶體用量： 改善 Turbopack 記憶體用量

我們計畫在即將發布的版本中穩定 next dev --turbo，但它仍然是選擇性加入的功能。

可靠性

使用 Turbopack 的 Next.js 現在通過了 5,600 個開發測試 (94%)，比上次更新增加了 600 個。您可以在 areweturboyet.com 上追蹤進度。

我們持續在所有 Vercel 的 Next.js 應用程式上實測 next dev --turbo，包括 vercel.com 和 v0.dev。所有參與這些應用程式的工程師每天都在使用 Turbopack。

我們發現並修正了許多使用 Turbopack 的超大型 Next.js 應用程式的問題。針對這些修正，我們已將新的測試新增至 Next.js 中現有的開發測試套件。

效能

針對大型 Next.js 應用程式 vercel.com，我們觀察到：

本地伺服器啟動速度提升高達 76.7%
使用快速重新整理功能更新程式碼的速度提升高達 96.3%
初始路由編譯速度提升高達 45.8%，且未快取（Turbopack 尚無磁碟快取）

在 v0.dev 中，我們發現了一個最佳化 React Client Components 在 Turbopack 中探索和捆綁方式的機會，從而使初始編譯時間加快了高達 61.5%。在 vercel.com 中也觀察到了這種效能提升。

未來改善

Turbopack 目前具有記憶體內快取功能，可縮短快速重新整理的增量編譯時間。

但是，重新啟動 Next.js 開發伺服器時，目前不會保留快取。Turbopack 效能的下一個重大步驟是磁碟快取，這將允許在重新啟動開發伺服器時保留快取。

開發者體驗改善

改進的錯誤訊息和快速重新整理

我們知道清晰的錯誤訊息對於您的本地開發體驗至關重要。我們進行了許多修正，以改善您在執行 next dev 時看到的堆疊追蹤和錯誤訊息的品質。

先前顯示捆綁器錯誤（如 webpack-internal）的錯誤，現在可以正確顯示錯誤的原始碼和受影響的檔案。
在用戶端元件中看到錯誤，然後在編輯器中修正錯誤後，快速重新整理功能並未清除錯誤畫面。這需要硬重新載入。我們已修正了許多此類情況。例如，嘗試從用戶端元件匯出 metadata。

例如，這是先前的錯誤訊息

An example of an error from a fetch call in Next.js 14. — Next.js 14 中 fetch 呼叫錯誤的範例。

Next.js 14.1 已將其改進為

Errors from fetch calls during rendering now display the source code of the error and the affected file. — 在渲染期間來自 fetch 呼叫的錯誤，現在會顯示錯誤的原始碼和受影響的檔案。

`window.history.pushState` 和 `window.history.replaceState`

App Router 現在允許使用原生 pushState 和 replaceState 方法，以更新瀏覽器的歷史堆疊，而無需重新載入頁面。

pushState 和 replaceState 呼叫整合到 Next.js App Router 中，讓您可以與 usePathname 和 useSearchParams 同步。

當需要立即更新 URL 以儲存狀態（例如篩選器、排序順序或其他希望在重新載入後持續存在的資訊）時，這非常有用。

'use client';
 
import { useSearchParams } from 'next/navigation';
 
export default function SortProducts() {
  const searchParams = useSearchParams();
 
  function updateSorting(sortOrder: string) {
    const params = new URLSearchParams(searchParams.toString());
    params.set('sort', sortOrder);
    window.history.pushState(null, '', `?${params.toString()}`);
  }
 
  return (
    <>
      <button onClick={() => updateSorting('asc')}>Sort Ascending</button>
      <button onClick={() => updateSorting('desc')}>Sort Descending</button>
    </>
  );
}

深入了解如何在 Next.js 中使用原生 History API。

資料快取記錄

為了改善在執行 next dev 時，Next.js 應用程式中快取資料的可觀察性，我們針對 logging 設定選項進行了一些改進。

您現在可以顯示是否有快取 HIT 或 SKIP 以及要求的完整 URL

終端機

GET / 200 in 48ms
 ✓ Compiled /fetch-cache in 117ms
 GET /fetch-cache 200 in 165ms
  │ GET https://api.vercel.app/products/1 200 in 14ms (cache: HIT)
 ✓ Compiled /fetch-no-store in 150ms
 GET /fetch-no-store 200 in 548ms
  │ GET https://api.vercel.app/products/1 200 in 345ms (cache: SKIP)
  │  │  Cache missed reason: (cache: no-store)

可以透過 next.config.js 啟用此功能

next.config.js

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
};

`next/image` 支援 `<picture>` 和美術指導

Next.js Image 元件現在透過 getImageProps()（穩定版）支援更進階的使用案例，這些案例不需要直接使用 <Image>。這包括

使用 background-image 或 image-set
使用畫布 context.drawImage() 或 new Image()
使用 <picture> 媒體查詢來實作美術指導或淺色/深色模式圖片

import { getImageProps } from 'next/image';
 
export default function Page() {
  const common = { alt: 'Hero', width: 800, height: 400 };
  const {
    props: { srcSet: dark },
  } = getImageProps({ ...common, src: '/dark.png' });
  const {
    props: { srcSet: light, ...rest },
  } = getImageProps({ ...common, src: '/light.png' });
 
  return (
    <picture>
      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
      <source media="(prefers-color-scheme: light)" srcSet={light} />
      <img {...rest} />
    </picture>
  );
}

深入了解 getImageProps()。

平行 & 攔截路由

在 Next.js 14.1 中，我們針對平行 & 攔截路由進行了 20 項改進。

在過去的兩個版本中，我們一直專注於改善 Next.js 的效能和可靠性。現在，我們已能夠根據您的意見回饋，針對平行 & 攔截路由進行許多改進。值得注意的是，我們新增了對全部捕捉路由和伺服器動作的支援。

平行路由可讓您在相同的版面配置中同時或有條件地渲染一個或多個頁面。對於應用程式的高度動態區段，例如社交網站上的儀表板和動態消息，平行路由可用於實作複雜的路由模式。
攔截路由可讓您在目前的版面配置中，從應用程式的另一個部分載入路由。例如，當點擊動態消息中的相片時，您可以將相片顯示在覆蓋動態消息的模式視窗中。在這種情況下，Next.js 會攔截 /photo/123 路由、遮罩 URL，並將其覆蓋在 /feed 上。

深入了解平行 & 攔截路由或查看範例。

其他改進

自 14.0 版以來，我們修正了社群中許多高票錯誤。

我們最近也發布了一些影片，說明快取，以及一些您可能會覺得有用的 App Router 的常見錯誤。

[文件] 關於重新導向的新文件
[文件] 關於測試的新文件
[文件] 包含生產檢查清單的新文件
[功能] 新增 <GoogleAnalytics /> 元件至 next/third-parties (文件)
[改善] create-next-app 現在更小且安裝速度更快 (PR)
[改善] 巢狀路由擲回錯誤時，仍可由 global-error 捕捉 (PR)
[改善] 在伺服器動作中使用時，redirect 現在會遵循 basePath (PR)
[改善] 修正 next/script 和 beforeInteractive 在 App Router 中的用法 (PR)
[改善] 自動轉譯 @aws-sdk 和 lodash 以加快路由啟動速度 (PR)
[改善] 修正使用 next dev 和 next/font 時，未設定樣式的內容閃爍問題 (PR)
[改善] 傳播 notFound 錯誤，使其越過區段的錯誤邊界 (PR)
[改善] 修正使用 Pages Router i18n 從地區網域提供公開檔案的問題 (PR)
[改善] 如果傳遞了無效的 revalidate 值，則會發生錯誤 (PR)
[改善] 修正在 Windows 上建立組建時，Linux 機器上的路徑問題 (PR)
[改善] 修正在具有 basePath 的多區域應用程式中使用快速重新整理/HMR 時的問題 (PR)
[改善] 改善從終止訊號的正常關機 (PR)
[改善] 從不同路由攔截時，模式路由發生衝突 (PR)
[改善] 修正使用 basePath 設定時攔截路由的問題 (PR)
[改善] 當遺失平行插槽導致 404 時顯示警告 (PR)
[改善] 改善與全部捕捉路由一起使用時的攔截路由 (PR)
[改善] 改善與 revalidatePath 一起使用時的攔截路由 (PR)
[改進] 修正搭配平行路由使用 @children 插槽的問題 (PR)
[改進] 修正搭配平行路由使用參數時發生 TypeError 的問題 (PR)
[改進] 修正預設平行路由的 catch-all 路由正規化問題 (PR)
[改進] 修正 next build 摘要中平行路由的顯示問題 (PR)
[改進] 修正使用攔截路由時的路由參數問題 (PR)
[改進] 改善深度巢狀的平行/攔截路由 (PR)
[改進] 修正攔截路由與路由群組配對時的 404 錯誤 (PR)
[改進] 修正搭配伺服器行為 / 重新驗證路由器快取的平行路由問題 (PR)
[改進] 修正搭配攔截路由使用 rewrites 的問題 (PR)
[改進] 伺服器行為現在可從第三方函式庫運作 (PR)
[改進] Next.js 現在可以在 ESM 套件中使用 (PR)
[改進] 針對 Material UI 等函式庫的 Barrel 檔案最佳化 (PR)
[改進] 現在在未搭配 Suspense 錯誤使用 useSearchParams 的情況下，建置將會失敗 (PR)

貢獻者

Next.js 是超過 3,000 位個別開發者、Google 和 Meta 等產業合作夥伴，以及 Vercel 核心團隊共同努力的成果。在 GitHub Discussions、Reddit 和 Discord 上加入社群。

此版本由以下團隊為您帶來

Next.js 團隊：Andrew、Balazs、Jiachi、Jimmy、JJ、Josh、Sebastian、Shu、Steven、Tim、Wyatt 和 Zack。
Turbopack 團隊：Donny、Leah、Maia、OJ、Tobias 和 Will。
Next.js 文件：Delba、Steph、Michael 和 Lee。

以及以下貢獻者的貢獻：@OlehDutchenko、@eps1lon、@ebidel、@janicklas-ralph、@JohnPhamous、@chentsulin、@akawalsky、@BlankParticle、@dvoytenko、@smaeda-ks、@kenji-webdev、@rv-david、@icyJoseph、@dijonmusters、@A7med3bdulBaset、@jenewland1999、@mknichel、@kdy1、@housseindjirdeh、@max-programming、@redbmk、@SSakibHossain10、@jamesmillerburgess、@minaelee、@officialrajdeepsingh、@LorisSigrist、@yesl-kim、@StevenKamwaza、@manovotny、@mcexit、@remcohaszing、@ryo-manba、@TranquilMarmot、@vinaykulk621、@haritssr、@divquan、@IgorVaryvoda、@LukeSchlangen、@RiskyMH、@ash2048、@ManuWeb3、@msgadi、@dhayab、@ShahriarKh、@jvandenaardweg、@DestroyerXyz、@SwitchBladeAK、@ianmacartney、@justinh00k、@tiborsaas、@ArianHamdi、@li-jia-nan、@aramikuto、@jquinc30、@samcx、@Haosik、@AkifumiSato、@arnabsen、@nfroidure、@clbn、@siddtheone、@zbauman3、@anthonyshew、@alexfradiani、@CalebBarnes、@adk96r、@pacexy、@hichemfantar、@michaldudak、@redonkulus、@k-taro56、@mhughdo、@tknickman、@shumakmanohar、@vordgi、@hamirmahal、@gaspar09、@JCharante、@sjoerdvanBommel、@mass2527、@N-Ziermann、@tordans、@davidthorand、@rmathew8-gh、@chriskrogh、@shogunsea、@auipga、@SukkaW、@agustints、@OXXD、@clarencepenz、@better-salmon、@808vita、@coltonehrman、@tksst、@hugo-syn、@JakobJingleheimer、@Willem-Jaap、@brandonnorsworthy、@jaehunn、@jridgewell、@gtjamesa、@mugi-uno、@kentobento、@vivianyentran、@empflow、@samennis1、@mkcy3、@suhaotian、@imevanc、@d3lm、@amannn、@hallatore、@Dylan700、@mpsq、@mdio、@christianvuerings、@karlhorky、@simonhaenisch、@olci34、@zce、@LavaToaster、@rishabhpoddar、@jirihofman、@codercor、@devjiwonchoi、@JackieLi565、@thoushif、@pkellner、@jpfifer、@quisido、@tomfa、@raphaelbadia、@j9141997、@hongaar、@MadCcc、@luismulinari、@dumb-programmer、@nonoakij、@franky47、@robbertstevens、@bryndyment、@marcosmartini、@functino、@Anisi、@AdonisAgelis、@seangray-dev、@prkagrawal、@heloineto、@kn327、@ihommani、@MrNiceRicee、@falsepopsky、@thomasballinger、@tmilewski、@Vadman97、@dnhn、@RodrigoTomeES、@sadikkuzu、@gffuma、@Schniz、@joulev、@Athrun-Judah、@rasvanjaya21、@rashidul0405、@nguyenbry、@Mwimwii、@molebox、@mrr11k、@philwolstenholme、@IgorKowalczyk、@Zoe-Bot、@HanCiHu、@JackHowa、@goncy、@hirotomoyamada、@pveyes、@yeskunall、@ChendayUP、@hmaesta、@ajz003、@its-kunal、@joelhooks、@blurrah、@tariknh、@Vinlock、@Nayeem-XTREME、@aziyatali、@aspehler 和 @moka-ayumu。