Next.js 10.2

我們很高興推出 Next.js 10.2，主要功能包括：

• 更快的建置速度：透過快取機制，後續建置速度提升最高約 60%。
• 更快的刷新速度：每次刷新加快 100 毫秒至 200 毫秒。
• 更快的啟動速度：next dev 啟動速度提升最高約 24%。
• 改進的無障礙性：路由變更現在會由螢幕閱讀器自動播報。
• 更靈活的重定向與改寫規則：可匹配任何標頭、Cookie 或查詢字串。
• 自動網頁字體優化：透過內嵌字體 CSS 提升效能。

立即更新請執行 npm i next@latest。

Webpack 5

在 Next.js 10.1 中，我們改進了快速刷新並縮短了安裝時間。現在我們很高興分享透過 webpack 5 實現的更多效能提升。

從 Next.js 10.2 開始，所有未在 next.config.js 中使用自訂 webpack 配置的應用程式將自動啟用 webpack 5。

啟用 webpack 5 後，您將自動獲得以下新功能和改進：

• 改進的磁碟快取：磁碟快取允許編譯器在多次執行 next build 之間保留工作成果。只有變更過的檔案會重新編譯，從而提升效能。Vercel 客戶 Scale 觀察到後續建置速度提升了 63%。
• 改進的快速刷新：Next.js 現在會優先處理與快速刷新相關的編譯，使每次刷新加快 100 毫秒至 200 毫秒。
• 改進的資源長期快取：多次執行 next build 的輸出現在是確定性的，改善了生產環境中 JavaScript 資源的瀏覽器快取效果。當頁面內容未變更時，雜湊值保持不變。
• 改進的 Tree Shaking：CommonJS 模組現在可以進行 tree shaking 以自動移除未使用的程式碼。使用靜態分析來確定無副作用的模組。export * 會追蹤更多資訊，且不再將預設導出標記為已使用。同時啟用了內部模組的 tree shaking，允許對僅在未使用導出中使用的導入進行 tree shaking。

我們努力確保從 webpack 4 到 5 的平滑過渡。Next.js 核心測試套件包含超過 3,400 項整合測試，每個拉取請求都會在啟用 webpack 5 支援的情況下執行。

如果您的應用程式有自訂的 webpack 配置，建議按照文件啟用 webpack 5。升級至 Next.js 中的 webpack 5 後，請與我們分享您的意見。

改進的啟動效能

我們改進了 Next.js CLI 的初始化過程，使 next dev 的啟動時間在首次執行後提升最高 24%。例如，vercel.com 的 next dev 從 3.3 秒縮短至 2.5 秒。

我們的目標是讓您的本地開發體驗達到即時（快 20 倍）。請期待未來版本中更多的啟動效能改進。

無障礙性改進

路由變更現在預設會向螢幕閱讀器和其他輔助技術播報。

以下範例展示了在客戶端導航時，macOS VoiceOver 播報標題「Real Data. Real Performance」的情況。頁面名稱首先尋找 <h1> 元素，若無則回退至 document.title，最後使用路徑名稱。

路由變更現在會自動播報。

感謝 Kyle Boss 和 Kitty Giraudel 協助實現此功能。

基於標頭和查詢字串參數的路由

Next.js 的改寫、重定向和標頭現在支援新的 has 屬性，允許您匹配傳入的標頭、Cookie 和查詢字串。

Vercel 客戶 Joyn 使用 has 來優化內容的可發現性和效能。例如，您可以根據 User-Agent 重定向舊版瀏覽器：

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!old-browser$).*)',
        has: [
          {
            type: 'header',
            key: 'User-Agent',
            value:
              'Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; IEMobile/10.0; ARM; Touch; Microsoft; Lumia 950)',
          },
        ],
        destination: '/old-browser',
        permanent: false,
      },
    ];
  },
};

另一個例子是根據用戶位置進行重定向：

module.exports = {
  async redirects() {
    return [
      {
        source: '/:path((?!uk/).*)',
        has: [
          {
            type: 'header',
            key: 'x-vercel-ip-country',
            value: 'GB',
          },
        ],
        destination: '/uk/:path*',
        permanent: true,
      },
    ];
  },
};

最後，您可以在用戶已登入時進行重定向：

module.exports = {
  async redirects() {
    return [
      {
        source: '/',
        has: [
          {
            type: 'header',
            key: 'x-authorized',
            value: '(?<authorized>yes|true)',
          },
        ],
        destination: '/dashboard?authorized=:authorized',
        permanent: false,
      },
    ];
  },
};

要了解更多並探索更多範例，請查看重定向文件。

自動網頁字體優化

82% 的桌面網頁使用網頁字體。自訂字體對於網站的品牌、設計和跨瀏覽器/設備一致性非常重要。然而，使用網頁字體不應以效能為代價。

Next.js 現在在使用網頁字體時支援自動網頁字體優化。預設情況下，Next.js 會在建置時自動內嵌字體 CSS，消除獲取字體宣告的額外往返。這改善了首次內容繪製 (FCP) 和最大內容繪製 (LCP)。例如：

// 優化前
<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />
 
// 優化後
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    <!-- ... -->
  }
</style>

自動網頁字體優化目前支援 Google Fonts，我們正在努力擴展對其他字體供應商的支援。我們還計劃增加對載入策略和 font-display 值的控制。透過預設優化字體，我們能夠幫助開發者更快地交付網站並改善其核心網頁指標，而無需額外努力。

感謝我們的合作夥伴 Google 和 Janicklas Ralph 協助實現此功能。

團隊擴張

我們很高興宣布 webpack 的作者 Tobias Koppers 已加入 Vercel 的 Next.js 團隊。

社群

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

此版本由以下貢獻者共同實現：@rpxs, @lemarier, @RayhanADev, @janicklas-ralph, @devknoll, @felipeptcho, @rishabhpoddar, @sokra, @m-leon, @turadg, @PierreBerger, @divmain, @dominikwilkowski, @pranavp10, @ijjk, @santidalmasso, @HaNdTriX, @jamesgeorge007, @garmeeh, @leerob, @shuding, @feute, @timneutkens, @alexvilchis, @Timer, @malixsys, @sahilrajput03, @marcvangend, @steven-tey, @julienben, @umarsenpai, @Mzaien, @merceyz, @AntelaBrais, @SystemDisc, @M1ck0, @jbmoelker, @jaisharx, @amannn, @vkarpov15, @gaelhameon, @4ortytwo, @Simply007, @styxlab, @xCloudzx, @wodCZ, @emmanuelgautier, @leosuncin, @ludder, @geritol, @vassbence, @vvo, @portenez, @arshad, @tarunama, @flybayer, @Hanaffi, @SokratisVidros, @chibicode, @kylemarshall18, 和 @jarrodwatts。