跳到內容

簡介

歡迎來到 Next.js 文件!

什麼是 Next.js?

Next.js 是一個 React 框架,用於建置全堆疊 Web 應用程式。您可以使用 React 元件來建置使用者介面,並使用 Next.js 來獲得額外功能和最佳化。

在底層,Next.js 也抽象化並自動設定 React 所需的工具,例如打包、編譯等等。這讓您可以專注於建置應用程式,而無需花時間進行設定。

無論您是個人開發者還是大型團隊的一份子,Next.js 都能幫助您建置互動式、動態且快速的 React 應用程式。

主要功能

Next.js 的一些主要功能包括

功能描述
路由基於伺服器元件之上建構的檔案系統路由,支援版面配置、巢狀路由、載入狀態、錯誤處理等等。
渲染使用客戶端和伺服器元件進行客戶端和伺服器端渲染。透過 Next.js 在伺服器上進行靜態和動態渲染進一步最佳化。在 Edge 和 Node.js 執行階段上進行串流處理。
資料抓取簡化資料抓取,在伺服器元件中使用 async/await,並擴充 fetch API 以進行請求記憶化、資料快取和重新驗證。
樣式設定支援您偏好的樣式設定方法,包括 CSS Modules、Tailwind CSS 和 CSS-in-JS
最佳化圖片、字體和腳本最佳化,以改善您應用程式的核心網頁指標和使用者體驗。
TypeScript改進對 TypeScript 的支援,具有更好的類型檢查和更有效率的編譯,以及自訂 TypeScript 外掛程式和類型檢查器。

如何使用這些文件

在螢幕左側,您會找到文件導覽列。文件頁面依序組織,從基礎到進階,因此您可以在建置應用程式時逐步遵循。但是,您可以依任何順序閱讀它們,或跳到適用於您的使用案例的頁面。

在螢幕右側,您會看到目錄,可讓您更輕鬆地在頁面的各個章節之間導航。如果您需要快速找到頁面,可以使用頂部的搜尋列,或搜尋快捷鍵 (Ctrl+KCmd+K)。

若要開始使用,請查看安裝指南。

App Router 與 Pages Router

Next.js 有兩個不同的路由器:App Router 和 Pages Router。App Router 是一個較新的路由器,可讓您使用 React 的最新功能,例如伺服器元件和串流處理。Pages Router 是原始的 Next.js 路由器,可讓您建置伺服器渲染的 React 應用程式,並繼續支援較舊的 Next.js 應用程式。

在側邊欄的頂部,您會注意到一個下拉式選單,可讓您在 App RouterPages Router 功能之間切換。由於每個目錄都有獨特的功能,因此請務必追蹤選取了哪個標籤。

頁面頂部的麵包屑導覽也會指示您目前正在檢視的是 App Router 文件還是 Pages Router 文件。

先備知識

雖然我們的文件旨在對初學者友善,但我們需要建立一個基準,以便文件可以專注於 Next.js 功能。每當我們介紹新概念時,我們都會確保提供相關文件的連結。

為了充分利用我們的文件,建議您對 HTML、CSS 和 React 有基本的了解。如果您需要複習 React 技能,請查看我們的React 基礎課程,這將向您介紹基礎知識。然後,透過建置儀表板應用程式來了解更多關於 Next.js 的資訊。

協助工具

為了在使用螢幕閱讀器閱讀文件時獲得最佳協助工具,我們建議使用 Firefox 和 NVDA,或 Safari 和 VoiceOver。

加入我們的社群

如果您對任何與 Next.js 相關的事物有疑問,隨時歡迎在GitHub DiscussionsDiscordX (Twitter)Reddit上向我們的社群提問。