使用 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」即可編輯專案。
• 如要預覽網站，請按下「View App」，然後按下「Fullscreen」。

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

元件也可以建立和使用，就像任何其他 React 應用程式一樣。我們已經透過單一元件 nav.js 建立 components/ 目錄，這個元件已匯入 index.js 中。根據預設，只有在載入該網頁時，才會擷取 Next.js 中使用的每個匯入作業，提供自動程式碼分割功能的優點。

此外，Next.js 中的每個初始載入網頁都會在伺服器端轉譯。如果您在開發人員工具中開啟「網路」面板，就會看到文件的初始要求傳回完整伺服器轉譯的頁面。

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

注意： 請參閱「伺服器轉譯」，瞭解伺服器端轉譯作業經常如何改善使用者體驗。

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

後續步驟

巡迴演出 😛?

本系列的所有其他指南都會詳細介紹特定的 Next.js 功能：

• 路徑預先擷取可加快網頁瀏覽速度
• 提供混合型和 AMP 專用網頁，以便更快從搜尋引擎載入內容
• 使用動態匯入功能分割元件，減少 JavaScript 佔用空間