簡介
歡迎來到 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+K
或 Cmd+K
)。
若要開始使用,請查看安裝指南。
App Router 與 Pages Router
Next.js 有兩個不同的路由器:App Router 和 Pages Router。App Router 是一個較新的路由器,可讓您使用 React 的最新功能,例如伺服器元件和串流處理。Pages Router 是原始的 Next.js 路由器,可讓您建置伺服器渲染的 React 應用程式,並繼續支援較舊的 Next.js 應用程式。
在側邊欄的頂部,您會注意到一個下拉式選單,可讓您在 App Router 和 Pages Router 功能之間切換。由於每個目錄都有獨特的功能,因此請務必追蹤選取了哪個標籤。
頁面頂部的麵包屑導覽也會指示您目前正在檢視的是 App Router 文件還是 Pages Router 文件。
先備知識
雖然我們的文件旨在對初學者友善,但我們需要建立一個基準,以便文件可以專注於 Next.js 功能。每當我們介紹新概念時,我們都會確保提供相關文件的連結。
為了充分利用我們的文件,建議您對 HTML、CSS 和 React 有基本的了解。如果您需要複習 React 技能,請查看我們的React 基礎課程,這將向您介紹基礎知識。然後,透過建置儀表板應用程式來了解更多關於 Next.js 的資訊。
協助工具
為了在使用螢幕閱讀器閱讀文件時獲得最佳協助工具,我們建議使用 Firefox 和 NVDA,或 Safari 和 VoiceOver。
加入我們的社群
如果您對任何與 Next.js 相關的事物有疑問,隨時歡迎在GitHub Discussions、Discord、X (Twitter)和Reddit上向我們的社群提問。
開始使用
範例
建置你的應用程式
API 參考
開始使用
建置你的應用程式
API 參考
架構
社群
這有幫助嗎?