2021 年 3 月 29 日，星期一

Next.js 10.1

Belén Curcio@okbel

JJ Kasper@_ijjk

Joe Haddad@timer150

Lee Robinson@leeerob

Luis Alvarez@luis_fades

Shu Ding@shuding_

Steven@styfle

Tim Neutkens@timneutkens

我們很高興推出 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 只會更新您編輯的檔案中的程式碼，並且只會重新渲染該元件，而不會遺失元件狀態。這包含樣式（inline、CSS-in-JS 或 CSS/Sass 模組）、標記、事件處理器和效果（透過 useEffect）。

現在，我們讓它在每次編輯時都**快了 200 毫秒**，而且**您無需修改任何程式碼**。平均而言，快速重新整理的速度提升了 3 倍。

想要更快的效能和更佳的建置時間嗎？立即使用新的 future 旗標選擇 Webpack 5。此旗標目前為候選版本 (RC)，Webpack 5 將很快成為預設版本。啟用此旗標後，請與我們分享您的任何意見。

next.config.js

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

要進一步了解 Webpack 5 如何以向後相容的方式套用到您的應用程式，請查看文件。

安裝時間縮短

我們已最佳化 Next.js 的相依性圖，以縮短安裝時間和相依性大小。現在，無論是在本機還是在您的 CI/CD 流程中，建立 Next.js 專案都比以往更快。

	10.0	10.1	差異
平均安裝時間	約 15 秒	約 5 秒	快 3.0 倍
安裝大小	96.5MB	39.9MB	減少 58%
相依性數量	424	187	減少 56%

作為我們最佳化相依性目標的一部分，我們也更新或替換了被作者標記為已棄用的 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 來優化圖片。

components/my-image.js

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="Picture of the author"
      width={500}
      height={500}
    />
  );
};

更多資訊，請參考 next/image 說明文件。

Next.js Commerce Shopify 整合

電子商務是採用 Next.js 成長最快的產業之一。蘋果、沃爾瑪、麥當勞和耐吉等公司都信賴 Next.js。

為了讓您在構建電子商務應用程式時有一個高效能的起點，我們發布了 Next.js Commerce。在收到數千個 Shopify 的請求後，我們更新了 Next.js Commerce，使其具備供應商無關的使用者介面，讓您可以導入任何您選擇的 headless 電子商務解決方案。

在不同供應商之間切換只需在您的設定中修改一行設定。我們還建立了一個功能 API，讓您可以根據您的使用案例切換功能，同時保持一流的效能。

Next.js 開發人員只需點擊幾下，即可複製、部署和完全自訂自己的電子商務商店。前往 nextjs.org/commerce 了解更多，並試用我們的 Shopify Demo。即將支援更多電子商務供應商。

自訂 500 錯誤頁面

您現在可以建立一個自訂的 pages/500.js 檔案，以便在顯示錯誤時加入您自己的標誌和品牌。與 pages/404.js 類似，這個檔案會在建置時靜態產生。

pages/500.js

export default function Custom500() {
  return <h1>500 - Server-side error occurred</h1>;
}

更嚴謹的 PostCSS 設定載入

如果您正在使用 PostCSS 和 Webpack 5，您可以透過新的 future 旗標來提升效能（透過快取）。

next.config.js

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

立即試用並讓我們知道您的意見回饋。如需更多資訊，請查看 PostCSS 設定文件。

在 tsconfig.json 中支援 extends

tsconfig.json

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

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

偵測預覽模式是否已啟用

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

import { useRouter } from 'next/router';
 
function MyComponent() {
  const { isPreview } = useRouter();
  return <>{isPreview ? <h1>Preview Mode Enabled</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 個星標。

加入 Next.js 社群，請前往 GitHub Discussions。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！