使用 Next.js 做為預設效能

Next.js 會處理 React 應用程式中的許多最佳化作業,因此您不必

Next.js 是一種有特定偏好的 React 架構,內建多項效能最佳化功能。這個架構背後的主要概念,是透過預設納入這些功能,確保應用程式啟動並維持最佳效能。

這份簡介將概略介紹架構提供的許多功能。本系列的其他指南會更詳細地介紹這些功能。

雖然 Next.js 預設提供多項效能最佳化功能,但這些指南旨在進一步說明這些功能,並說明如何運用這些功能打造快速且效能的使用體驗。

一般來說,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

接著前往目錄並啟動開發伺服器:

cd new-app
npm run dev

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

  • 按一下「Remix to Edit」,即可編輯專案。
  • 如要預覽網站,請按下「View App」。然後按下「Fullscreen」圖示 全螢幕

請注意,系統會使用單一檔案 index.jsx 建立 pages/ 目錄。Next.js 採用檔案系統路由方法,這個目錄中的每個頁面都會做為個別路由提供。在這個目錄中建立新檔案 (例如 about.js) 時,系統會自動建立新路徑 (/about)。

您也可以像使用其他 React 應用程式一樣建立及使用元件。components/ 目錄已使用單一元件 nav.js 建立,且已在 index.js 中匯入。根據預設,Next.js 中使用的每個匯入項目都只會在載入該頁面時擷取,可提供自動程式碼分割的優點。

此外,Next.js 中的每個初始網頁載入作業都是伺服器端轉譯。如果您在開發人員工具中開啟「網路」面板,可以看到文件的初始要求會傳回完全由伺服器算繪的網頁。

「Network」面板的「Preview」分頁顯示,在要求網頁時,Next.js 會傳回完整的 HTML 內容。
網路面板的「預覽」分頁顯示,在要求網頁時,Next.js 會傳回視覺上完整的 HTML。

以上只是 Next.js 自動提供的眾多功能中的幾項。許多功能都可以自訂,並可根據不同用途進行修改。

後續步驟

我故意使用雙關語 😛?

這個系列中的其他指南將深入探討特定 Next.js 功能: