介紹
歡迎來到 Next.js 文件庫！
什麼是 Next.js？
Next.js 是一個用於建置全端網頁應用程式的 React 框架。您可以使用 React 元件來建置使用者介面，並透過 Next.js 獲得額外功能與優化。
在底層，Next.js 還抽象化並自動配置了 React 所需的工具，例如打包 (bundling)、編譯 (compiling) 等。這讓您可以專注於建置應用程式，而不需花費時間在配置上。
無論您是獨立開發者或是團隊成員，Next.js 都能協助您建置互動式、動態且快速的 React 應用程式。
主要功能
以下是 Next.js 的一些主要功能：
| 功能 | 說明 |
|---|---|
| 路由 (Routing) | 基於檔案系統的路由器，建構在伺服器元件 (Server Components) 之上，支援佈局 (layouts)、嵌套路由、載入狀態、錯誤處理等功能。 |
| 渲染 (Rendering) | 支援客戶端與伺服器端渲染 (Client-side and Server-side Rendering)，並透過客戶端與伺服器元件 (Client and Server Components) 實現。進一步透過 Next.js 的靜態與動態渲染 (Static and Dynamic Rendering) 優化伺服器端效能。支援 Edge 和 Node.js 運行環境的串流 (Streaming)。 |
| 資料獲取 (Data Fetching) | 簡化資料獲取流程，在伺服器元件中使用 async/await 語法，並擴展 fetch API 實現請求記憶化 (memoization)、資料快取 (caching) 與重新驗證 (revalidation)。 |
| 樣式 (Styling) | 支援多種樣式方法，包括 CSS 模組 (CSS Modules)、Tailwind CSS 和 CSS-in-JS |
| 優化 (Optimizations) | 提供圖片、字型與腳本優化，改善應用程式的核心網頁指標 (Core Web Vitals) 和使用者體驗。 |
| TypeScript | 強化 TypeScript 支援，提供更好的類型檢查與更高效的編譯，並支援自訂 TypeScript 插件與類型檢查器。 |
如何使用這些文件
在畫面左側，您會看到文件導覽列。文件頁面按照從基礎到進階的順序排列，讓您可以逐步學習如何建置應用程式。當然，您也可以按照任何順序閱讀，或直接跳至與您需求相關的頁面。
在畫面右側，您會看到頁面目錄，方便您在頁面各章節間快速導覽。若需要快速尋找特定頁面，可以使用頂部的搜尋欄，或使用搜尋快捷鍵 (Ctrl+K 或 Cmd+K)。
若要開始使用，請參閱 安裝指南。
App Router 與 Pages Router 的差異
Next.js 提供兩種不同的路由器：App Router 和 Pages Router。App Router 是較新的路由器，讓您可以使用 React 的最新功能，例如伺服器元件 (Server Components) 和串流 (Streaming)。Pages Router 則是 Next.js 原有的路由器，支援伺服器渲染 (server-rendered) 的 React 應用程式，並持續為舊版 Next.js 應用程式提供支援。
在側邊欄頂部，您會看到一個下拉選單，可切換 App Router 和 Pages Router 的功能。由於兩種路由器各有獨特功能，請注意當前選擇的是哪個選項。
頁面頂部的麵包屑導覽 (breadcrumbs) 也會顯示您當前查看的是 App Router 還是 Pages Router 的文件。
預備知識
雖然我們的文件設計對新手友善，但為了讓內容聚焦於 Next.js 功能，我們仍需要設定一些基礎知識門檻。每當引入新概念時，我們都會提供相關文件的連結。
為了充分理解文件內容，建議您具備 HTML、CSS 和 React 的基礎知識。若需要複習 React 技能，請參考我們的 React 基礎課程，該課程將介紹基本概念。接著，您可以透過 建置儀表板應用程式 進一步學習 Next.js。
無障礙訪問
若您使用螢幕閱讀器瀏覽文件，為獲得最佳無障礙體驗，建議搭配 Firefox 與 NVDA，或 Safari 與 VoiceOver 使用。
加入社群
若您對 Next.js 有任何疑問，歡迎隨時在 GitHub Discussions、Discord、Twitter 和 Reddit 上向我們的社群提問。