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」,讓專案可供編輯。
- 如要預覽網站,請按下「查看應用程式」,然後按下「全螢幕」圖示 。
請注意,系統會建立包含單一檔案 index.jsx
的 pages/
目錄。Next.js 遵循檔案系統轉送方法,在此目錄中的每個網頁都會以個別路徑提供。在這個目錄中建立新檔案 (例如 about.js
) 時,系統會自動建立新的路徑 (/about
)。
且也能像任何其他 React 應用程式一樣建立及使用元件。已透過單一元件 nav.js
建立 components/
目錄,且已匯入 index.js
。根據預設,在 Next.js 中使用的每項匯入作業只會在網頁載入時擷取,這是自動進行程式碼分割的好處。
此外,Next.js 每次載入的初始頁面都是伺服器端轉譯的。在開發人員工具中開啟「Network」面板時,您會看到文件的初始要求傳回伺服器完全轉譯的頁面。
以上只是 Next.js 提供的許多自動功能。其中許多都可以自訂,也可以根據不同用途修改。
後續步驟
虛構的 😛?
本系列的其他指南將詳細說明特定的 Next.js 功能:
- 轉送預先擷取功能以加快網頁瀏覽速度
- 提供混合型和僅限 AMP 的網頁,以加快搜尋引擎載入速度
- 使用動態匯入功能進行程式碼分割元件,以減少 JavaScript 用量