簡介 (Introduction)
歡迎來到 Next.js 文件! (Welcome to the Next.js documentation!)
什麼是 Next.js?(What is Next.js?)
Next.js 是一個用於建構全端網頁應用程式的 React 框架。您可以使用 React 元件來建構使用者介面,並使用 Next.js 來獲得額外的功能和優化。(Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.)
Next.js 在底層抽象化並自動配置 React 所需的工具,例如打包、編譯等等。這讓您可以專注於構建應用程式,而不是花時間在配置上。
無論您是個人開發者還是大型團隊的一員,Next.js 都能幫助您構建互動式、動態且快速的 React 應用程式。
主要功能
Next.js 的一些主要功能包括:
功能 | 說明 |
---|---|
路由 | 基於檔案系統的路由器,構建在伺服器組件之上,支援佈局、巢狀路由、載入狀態、錯誤處理等等。 |
渲染 | 使用客戶端和伺服器組件進行客戶端和伺服器端渲染。透過 Next.js 在伺服器上使用靜態和動態渲染進一步優化。在 Edge 和 Node.js 執行時環境中進行串流處理。 |
資料擷取 | 在伺服器組件中使用 async/await 簡化資料提取,以及用於請求記憶體化、資料快取和重新驗證的擴展 fetch API。 |
樣式 | 支援您偏好的樣式方法,包括 CSS 模組、Tailwind CSS 和 CSS-in-JS。 |
優化 | 影像、字體和指令碼優化,以改善應用程式的核心網頁指標和使用者體驗。 |
TypeScript | 改進了對 TypeScript 的支援,具有更好的類型檢查和更有效率的編譯,以及自訂 TypeScript 外掛程式和類型檢查器。 |
如何使用這些文件
在螢幕左側,您會找到文件導覽列。文件的頁面按順序排列,從基礎到進階,因此您可以在構建應用程式時逐步遵循它們。不過,您可以按任何順序閱讀它們,或跳到適用於您的使用案例的頁面。
在螢幕右側,您會看到一個目錄,可以更輕鬆地在頁面的不同區段之間導覽。如果您需要快速找到一個頁面,可以使用頂部的搜尋列或搜尋捷徑 (Ctrl+K
或 Cmd+K
)。
要開始使用,請查看安裝指南。
應用程式路由器與頁面路由器
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 討論區、Discord、X (Twitter) 以及 Reddit。
開始使用
建置您的應用程式
API 參考
建置您的應用程式
API 參考
架構
社群
這有幫助嗎?