使用 Next.js 做為預設效能

Next.js 會處理 React 應用程式中的多項最佳化作業，因此您無須

Houssein Djirdeh

Next.js 是具有認可的 React 架構，具備多種效能最佳化功能。此架構背後的主要概念，是確保應用程式預設加入這些功能，並盡可能維持應用程式的效能。

本課程將概略介紹架構提供的許多功能。本系列的其他指南將更詳細地探索各項功能。

注意： Chrome 目前與 Next.js 合作，為各種想建構快速伺服器轉譯 React 應用程式的開發人員改善架構。最近新增了許多新的最佳化功能，例如模組/無模組支援和改善精細的區塊化策略。

您會學到什麼？

雖然 Next.js 預設提供了多項效能最佳化功能，但這些指南將著重介紹這些功能的更多細節，並說明如何運用這些工具打造快速且高效能的體驗。

注意： 此集合假設您具備 React 的基本知識。如果沒有，請參閱 React 的入門指南頁面。

一般而言，您可以在 React 網站中新增許多最佳化功能，也適用於使用 Next.js 建構的應用程式。但重點在於 Next.js 專有的功能，因此不包含這些內容。如要進一步瞭解一般 React 最佳化作業，請參閱「React 集合」。

Next.js 與 React 有何不同？

React 程式庫可讓您透過以元件為基礎的方法輕鬆建構使用者介面。雖然功能強大的 React 是 UI 程式庫，許多開發人員包含模組套件器 (例如 webpack) 等額外工具，以及轉譯器 (例如 Babel) 等，其具備完整的建構工具鍊。

在「React 集合」中，我們使用 Create React App (CRA) 來快速啟動 React 應用程式。CRA 使用單一指令提供完整的建構工具鍊，來簡化設定 React 應用程式的麻煩。

儘管這項工具已內建一些 CRA 預設的最佳化功能，但這項工具的目標是提供簡單直接的設定。開發人員可以選擇是否要退出及修改設定。

Next.js (也可用於建立新的 React 應用程式)，採用不同方法。它可以立即針對許多開發人員想要採取的常見最佳化做法，但設定並不容易，例如：

• 伺服器端算繪
• 自動分割程式碼
• 路徑預先擷取
• 檔案系統轉送
• CSS-in-JS 樣式 (styled-jsx)

設定

如要建立新的 Next.js 應用程式，請執行下列指令：

npx create-next-app new-app

注意： npx 是安裝 npm 5.2.0 以上版本會自動安裝的套件執行器。這個程式庫簡化了與套件管理相關的許多程序，包括執行 CLI 指令 (例如 create-next-app)，而不必在機器上全面安裝。

然後，前往目錄並啟動開發伺服器：

cd new-app
npm run dev

注意： 您也可以將 Next.js 新增至現有的 React 應用程式。如要瞭解如何設定，請參閱手動設定。

以下嵌入顯示新 Next.js 應用程式的目錄結構。

• 按一下「Remix to Edit」，讓專案可供編輯。
• 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 。

請注意，系統會建立包含單一檔案 index.jsx 的 pages/ 目錄。Next.js 遵循檔案系統轉送方法，在此目錄中的每個網頁都會以個別路徑提供。在這個目錄中建立新檔案 (例如 about.js) 時，系統會自動建立新的路徑 (/about)。

且也能像任何其他 React 應用程式一樣建立及使用元件。已透過單一元件 nav.js 建立 components/ 目錄，且已匯入 index.js。根據預設，在 Next.js 中使用的每項匯入作業只會在網頁載入時擷取，這是自動進行程式碼分割的好處。

此外，Next.js 每次載入的初始頁面都是伺服器端轉譯的。在開發人員工具中開啟「Network」面板時，您會看到文件的初始要求傳回伺服器完全轉譯的頁面。

「網路」面板的「預覽」分頁顯示，Next.js 會在收到網頁要求時傳回完整的 HTML。

注意： 請參考伺服器轉譯一文，瞭解伺服器端轉譯作業通常如何為使用者提供更優質的體驗。

以上只是 Next.js 提供的許多自動功能。其中許多都可以自訂，也可以根據不同用途修改。

後續步驟

虛構的 😛?

本系列的其他指南將詳細說明特定的 Next.js 功能：

• 轉送預先擷取功能以加快網頁瀏覽速度
• 提供混合型和僅限 AMP 的網頁，以加快搜尋引擎載入速度
• 使用動態匯入功能進行程式碼分割元件，以減少 JavaScript 用量