Back返回部落格

Next.js 8.0.4

Next.js 8.0.4 帶來了構建效能提升、更小的打包體積、更強的預設值等改進。

我們很高興推出正式版的 Next.js 8.0.4：

一如既往，我們努力確保所有這些改進都完全向下相容。對於大多數 Next.js 應用程式，您只需執行：

終端機
npm i next@latest react@latest react-dom@latest

構建效能

Next.js 構建現在更具確定性，這意味著如果程式碼沒有變更，每次構建輸出都會保持相同結果。

這使得構建過程中的更多工作可以被快取，從而實現生產程式碼在首次構建後更快的重新構建。

我們的測量顯示，大量構建時間花在 JavaScript 壓縮上。由於構建輸出現在更具確定性，壓縮檔案已存在快取中的機率更大。

部署到 Vercel 的用戶將自動體驗到這些快取改進。

我們簡化了伺服器端的 next/dynamic 清單，現在只包含非同步載入的模組。這個簡化的清單計算速度更快，產生的 JavaScript 也更少。

CircleCI 用戶應該會注意到更快的構建時間。之前由於 CircleCI 環境沒有準確反映可用 CPU 數量，導致工作程序被過度排程。Next.js 現在會檢測 CircleCI 並根據可用資源設定適當的 CPU 數量。

更小的執行時體積

Next.js 現在生成的客戶端 JavaScript 減少了 5.58KB，HTTP 負載也比前一版本更小。

withRouter 不再依賴 hoist-non-react-statics，減少了 3KB 的打包體積。withRouter 仍然會提升 getInitialProps，但不會提升其他靜態屬性。

next/babel 預設值經過最佳化，可產生更精簡、更快的 JavaScript。

移除了 X-Powered-By 標頭，減少了 HTTP 負載大小。我們調查了社群，發現這個標頭在生產環境中經常被禁用，因此決定移除它。這也意味著如果您的專案中啟用了該選項，可以從 next.config.js 中移除 poweredByHeader。

我們在 Next.js 的依賴樹和整體程式碼庫中進行了許多最佳化，使每個無伺服器函式減少了 44KB (5.44KB gzip)。

無伺服器函式的大小直接影響無伺服器啟動效能，更小的函式意味著更快的啟動。

8.08.0.4差異
無伺服器頁面大小259 KB215 KB17% 更小
無伺服器頁面大小 (gzip)62.3 KB56.8 KB9% 更小

在 Next.js 8 發布後，我們收到少數用戶報告在 Next.js 之外導入 React 元件時遇到問題，例如在測試套件中。這是由於 Next.js 程式碼庫中對 next 的導入被重寫到正確檔案，但這個最佳化被應用於所有使用 next/babel 預設值的用戶。現在這個最佳化已移至 Next.js 構建過程本身，因此不會再與用戶的 babel 設定衝突。

預設 Viewport Meta 標籤

Next.js 的目標之一是為編寫網頁應用程式提供最佳預設值。為了減少在 Next.js 中實現 CSS 媒體查詢時所需的設定工作。

預設情況下，瀏覽器處理 CSS @media 查詢和縮放的方式與預期不同，這可能導致編寫 CSS @media 查詢時出現意外的不一致。

在幾乎所有情況下，Next.js 用戶都會在應用程式中添加 viewport meta 標籤來解決這些不一致問題。

從 8.0.4 版本開始，在大多數情況下不再需要這個 viewport 標籤。如果應用程式沒有設定 viewport，將應用預設 viewport：

<meta
  name="viewport"
  content="width=device-width,minimum-scale=1,initial-scale=1"
/>

仍然可以使用 next/head 覆寫 viewport 標籤：

pages/index.js
import Head from 'next/head';
 
function HomePage() {
  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width,minimum-scale=0.5,initial-scale=1"
        />
      </Head>
    </>
  );
}
 
export default HomePage;

感謝 Jason Miller 合作並實現了這個變更。

新的 @next/mdx 插件

MDX 讓您可以在 Markdown 文件中編寫 JSX。您可以使用常規的 markdown 語法編寫內容，並導入 React 元件來增強文件的互動性和動態內容。

為 Next.js 提供 MDX 支援的插件 @zeit/next-mdx 已移至 Next.js GitHub 存儲庫，現在以 @next/mdx 提供。

安裝：

終端機
npm i @next/mdx @mdx-js/loader

要讓它對您的 Next.js 應用程式可用，請建立一個 next.config.js 檔案並包含：

const withMDX = require('@next/mdx')();
module.exports = withMDX();

隨著時間推移，更多 Next.js 插件將被移至 Next.js 存儲庫，以便與 Next.js 核心一起發布並由 Next.js 測試套件進行測試。這樣我們可以確保熱模組替換、生產構建和其他功能與插件良好配合。

學習指南改進

Next.js Learn 是一個逐步學習 Next.js 的指南，包含測驗和範例。

該網站最近使用 MDX 重建，使得貢獻比以往更容易。我們歡迎任何人為 學習網站 做出貢獻！

該網站還升級使用了 Next.js 無伺服器目標，這是在 Next.js 8 中引入的，確保網站能夠擴展並為全球用戶提供快速體驗。

我們收到了大量關於內容改進的社群反饋，過去幾週我們一直在根據這些反饋採取行動。Next.js Learn 現在有更新的範例和各部分更多細節，使說明更容易理解！

Next.js 學習網站

Next.js 學習網站

貢獻

我們非常高興看到 Next.js 採用率的持續增長。

  • 我們已經有超過 660 位貢獻者。
  • 在 GitHub 上，該專案已被加星標超過 36,150 次。
  • 自首次發布以來，已提交超過 2,950 個拉取請求。

我們要感謝所有為這個 Next.js 版本做出貢獻的人。無論是貢獻核心功能還是擴展和改進我們不斷增長的 範例目錄，我們感謝所有貢獻。

如果您想開始為 Next.js 做貢獻，帶有 good first issue 或 help wanted 標籤的問題是一個很好的起點。

社群

Next.js 社群已成長到超過 6,000 名成員。

GitHub 討論區是一個您可以討論 Next.js、獲得解決問題建議並用您的 Next.js 知識幫助其他社群成員的地方。

加入 GitHub 上的社群！