Next.js 10.1

我們很榮幸推出 Next.js 10.1，主要功能包括：

• 3 倍更快的刷新速度：無需任何變更即可實現 200 毫秒更快的刷新
• 改善安裝時間：安裝體積減少 58%，依賴項減少 56%
• next/image 改進：支援 Apple Silicon (M1) 晶片，更多佈局和載入器選項
• Next.js Commerce Shopify 整合：可組合電商應用的靈活數據層
• 自訂 500 頁面：在錯誤頁面添加您的品牌標誌
• 嚴格的 PostCSS 配置載入：透過 Webpack 5 改善快取
• 支援 tsconfig.json 中的 extends：大型 TypeScript 應用的可擴展配置
• 偵測預覽模式啟用狀態：在預覽時條件式顯示內容
• 路由方法自動滾動至頂部：現在所有路由行為一致地自動滾動至頂部
• 文件改進：增量採用、遷移和 Docker 部署指南

3 倍更快的刷新速度

從 v9.4 開始，Next.js 將 Facebook 的 快速刷新 (Fast Refresh) 引入開源世界，讓您能即時獲得對 React 元件編輯的反饋。

這意味著 Next.js 只會更新您編輯的文件中的程式碼，並且只重新渲染該元件，而不會丟失元件狀態。這包括樣式（內聯、CSS-in-JS 或 CSS/Sass Modules）、標記、事件處理程序和效果（透過 useEffect）。

現在，我們讓每次編輯的速度 提升 200 毫秒，且 無需您進行任何程式碼變更。平均而言，這使快速刷新速度提高了 3 倍。

想要更快的性能和更好的建置時間嗎？現在就可以透過新的 future 標誌選擇啟用 Webpack 5。此標誌是候選版本 (RC)，Webpack 5 將很快成為預設選項。啟用此標誌後，請與我們分享您的反饋。

module.exports = {
  future: {
    webpack5: true,
  },
};

要了解更多關於 Webpack 5 如何以向後兼容的方式在您的應用中推出的資訊，請查看相關文件。

改善安裝時間

我們優化了 Next.js 的依賴關係圖，以減少安裝時間和依賴體積。現在建立 Next.js 專案比以往任何時候都快，無論是在本地還是在 CI/CD 流程中。

作為優化依賴項目標的一部分，我們還更新和/或替換了被作者標記為已棄用的 npm 套件——即使它們深藏在依賴樹中。現在全新安裝 Next.js 10.1 將不會出現任何套件警告。

next/image 改進

Apple Silicon 支援

當 Next.js 10 發布時，圖片優化功能依賴於原生依賴項。這導致安裝時間較慢，原生依賴項佔用了 Next.js 總安裝體積的 50%。此外，這還移除了安裝後執行腳本並實現了按需編譯。

我們很高興地宣布，透過 next/image 實現的自動圖片優化現在由 WebAssembly 提供支援。這項優化開箱即用，支援 next dev 和 next start。透過使用 WASM，我們減少了約 30MB 的安裝體積，並增加了對 Apple Silicon M1 MacBook 的支援。

我們正在繼續透過利用 SIMD 擴展和多線程來改進 WebAssembly 性能。

更多佈局選項

根據您的反饋，我們為 next/image 添加了多種新佈局和選項：

• layout=fill：無需提供 width 和 height（示範）
• layout=fixed：原生 img 行為（示範）
• layout=responsive：彈性寬度與固定寬高比（示範）
• layout=intrinsic：不會增長，但可以縮小並保持固定寬高比（示範）
• objectFit=cover：背景圖片（示範）

更多資訊，請查看 layout 文件。

改進的圖片優化支援

我們擴展了 next/image 的內建圖片載入器，新增了添加任何自訂載入器的能力。透過使用新的 loader 屬性，您可以使用任何供應商或 CDN 來優化圖片。

import Image from 'next/image';
 
const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`;
};
 
const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="/me.png"
      alt="作者照片"
      width={500}
      height={500}
    />
  );
};

更多資訊，請查看 next/image 文件。

Next.js Commerce Shopify 整合

電子商務是採用 Next.js 增長最快的行業之一。Apple、Wal-Mart、McDonald's 和 Nike 等公司都信任 Next.js。

我們希望為您提供一個高性能的起點來構建電子商務應用程式，因此我們發布了 Next.js Commerce。在收到數千個 Shopify 請求後，我們更新了 Next.js Commerce，提供與供應商無關的 UI——讓您可以選擇任何無頭電子商務解決方案。

切換供應商只需在配置中進行單行變更。我們還創建了功能 API，允許您根據使用案例切換功能——同時保持一流的性能。

Next.js Commerce 在全球的 Lighthouse 指標。

只需點擊幾下，Next.js 開發者就可以克隆、部署和完全自訂自己的電子商務商店。了解更多請訪問 nextjs.org/commerce 並試用我們的 Shopify 演示。更多商務供應商支援即將推出。

自訂 500 頁面

您現在可以創建自訂的 pages/500.js，在顯示錯誤時添加自己的標誌和品牌。類似於 pages/404.js，此文件在建置時靜態生成。

export default function Custom500() {
  return <h1>500 - 伺服器端發生錯誤</h1>;
}

嚴格的 PostCSS 配置載入

如果您使用 PostCSS 和 Webpack 5，可以透過新的 future 標誌來提高性能（透過快取）。

module.exports = {
  future: {
    webpack5: true,
    strictPostcssConfiguration: true,
  },
};

立即試用並告訴我們您的反饋。更多資訊，請查看 PostCSS 配置文件。

支援 tsconfig.json 中的 extends

您現在可以在 Next.js 使用的 tsconfig.json 中使用 extends 來擴展專案中的其他 tsconfig.json。例如，您可以從專案中的 tsconfig.base.json 擴展如下：

{
  "extends": "./tsconfig.base.json"
}

更多資訊，請查看 TypeScript 文件。

偵測預覽模式啟用狀態

您現在可以偵測預覽模式是否啟用，從而僅為編輯者渲染特定元件。

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>預覽模式已啟用</h1> : null}</>;
}

更多資訊，請查看 預覽模式文件。

路由方法自動滾動至頂部

使用 next/link 導航時，Next.js 會自動滾動至頂部。在 Next.js 10.1 中，router.push 和 router.replace 也將自動滾動至頂部以匹配 next/link 的行為。您可以使用 scroll 選項選擇退出自動滾動。

更多資訊，請查看 next/router 文件。

文件改進

我們還添加了各種新的指南、資源和文件，包括：

• 增量採用 Next.js
• 從 Gatsby 遷移
• 從 Create React App 遷移
• 從 React Router 遷移
• 身份驗證
• 使用 Docker 部署

社群

我們很高興看到 Next.js 的採用持續增長：

• 我們已有超過 1,540 位獨立貢獻者，自 10.0 版本以來新增了超過 240 位新貢獻者
• 在 GitHub 上，該專案已獲得超過 64,950 次星標

加入 GitHub Discussions 上的 Next.js 社群。Discussions 是一個社群空間，讓您可以與其他 Next.js 用戶聯繫，自由提問或分享您的工作。您也可以加入官方的 Next.js Discord。

致謝

我們感謝我們的社群，包括所有幫助塑造此版本的外部反饋和貢獻。

此版本的實現要感謝以下貢獻者：@shuding, @edazpotato, @laithyounes, @ijjk, @harshitsan, @selrond, @sromexs, @melono6, @timneutkens, @madou, @mottox2, @leerob, @divmain, @nblthree, @KennethKinLum, @KarthikeyanRanasthala, @alex-safian, @rishabhpoddar, @daviavmello, @jpalmieri, @merceyz, @Segolene-Alquier, @michrome, @janicklas-ralph, @Parnswir, @giraffesyo, @balazsorban44, @Cicada95, @vzaidman, @deniseyu, @eltociear, @unimprobable, @getspooky, @Timer, @armand1m, @alexknipfer, @elitan, @atcastle, @noahfschr, @amille44420, @laanayam333, @spidgorny, @devuxer, @Janpot, @nickbabcock, @rsipakov, @NkxxkN, @dominicfraser, @alevosia, @Kerumen, @CMeeg, @Pomaio, @tim-hanssen, @lachlanjc, @lebreRafael, @AryanBeezadhur, @guybedford, @petecorreia, @kaznak, @sam3d, @fwuensche, @rafaellaurindo, @sphilee, @styxlab, @rexxars, @smitbarmase, @maerzhase, @matamatanot, @lucleray, @jeremybalog, @tarunama, @zainfathoni, @destumme, @VictorAssis, @bhbs, @ciruz, @simnalamburt, @Almad, @frol, @ludofischer, @elliottsj, @Baheya, @Lalit2005, @vldmrkl, @AriFreyr, @kaykdm, @Sharcoux, @ramasilveyra, @devknoll, @botv, @pkellner, @sumanthratna, @sokra, @lfades, @thorwebdev, @berndartmueller, @davidspiessens, @ShashiSrinath, @elsigh, @MMT-LD, @hankandre, @maxnowack, @kmjennison, @darshkpatel, @mohsen1, @DylanRJohnston, @calmonr, @imrobinized, @justintemps, @ncarchedi, @btk, @faizanv, @chulkilee, @ryan-lustre, @dfelber, @Ymirke, @Robogeek95, @mcha-dev, @youngvform, @andrehsu, @Simply007, @rokobekavac0, @ja0n, @mattruby, @xom9ikk, @niko20, @LauraBeatris, @armspkt, @xiaooye, @sungpro, @awareness481, @joebernard, @jensmeindertsma, @donavon, @DaneTheory, @Zertz, @danielyefet, @lfender6445, @tajo, @jorrit, @tvler, @mustafaKamal-fe, @prateekbh, @gregrickaby, @enochndika, @zimv, @lharries, @JstnEdr, @zbialecki, @fredmontet, @leo, @kachkaev, @mongolyy, @justinphilpott, @mjr, @fireairforce, @jvarho, @gr-qft, @thomaswang, @c316, @benbender, @michael, @damusnet, @farhankk360, @smaktacular, @webda2l, @chibicode, @bar7b, @SiTaggart, @lolobosse, @jamesgeorge007, @nikosantis, @mikan3rd, @oshdev, @UnbearableBear, @tunesmith, @jamsinclair, @ivandotv, @Arthie, @louison, @FutureKode, @wesleytian, @dennismorello, @vispaduchuri, @styfle, @caulagi, @berekuk, @jescalan, @cascandaliato, @coetry, @PepijnSenders, @dkempner, @dlackty, @aralroca, @felixmeziere, @bmvantunes, @hideokamoto, @bram-l, @craigdanj, @ErikAugust, @joiglifberg, @blvdmitry, @bragle, @ykdojo, @vitorhsb, @TrySound, @mattfwood, @ka2jun8, @rfinkley, @bannier, @karlhorky, @shihabus, @yakovlevyuri, @dav-is, @lundgren2, @NoobTW, @Cow258, @toshi1127, @jorisw, @rifaidev, @willianjusten, @willheslam, @alexvilchis, @vitordino, @matthewlilley, @Prottoy2938, @brunocrosier, @OriginalEXE, @sidthesloth92, @davidsonsns, @saitolume, @tolfino, @iczero, @WestonThayer, @galanggg, @davidgolden, @weichienhung, @ashconnell, @callumbooth, @lyderichti59, @lukyth, @FredyC, @danielstocks, @valse, @MrJmpl3, @Sm1t, @lucas-varela, @jose-donato, @chr-ge, @pocorschi, @jflayhart, @aried3r, @LittleboyHarry, @Akumzy, @xeust, @tonyspiro, @yordis, @AmrSaber, @Mzaien, @PaulPCIO, @quinnturner, @SebastianTroc, @JipSterk, @developit, @yokinist, @queq1890, @oriverk, @ospira, @danielivert, @huv1k, @minhtule, @shunkakinoki, @khades, @eric-burel, @turadg, @huozhi, 和 @scottmacdonnell！