跳至內容

簡介 (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+KCmd+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 討論區DiscordX (Twitter) 以及 Reddit