介紹
歡迎來到 Next.js 文件庫！
什麼是 Next.js？
Next.js 是一個用於建置全端網頁應用程式的 React 框架。您可以使用 React 元件來建置使用者介面，並透過 Next.js 獲得額外的功能與優化。
在底層，Next.js 還抽象化並自動配置了 React 所需的工具，例如打包 (bundling)、編譯 (compiling) 等。這讓您可以專注於建置應用程式，而不必花時間在配置上。
無論您是獨立開發者還是大型團隊的一員，Next.js 都能幫助您建置互動式、動態且快速的 React 應用程式。
主要功能
Next.js 的一些主要功能包括：
| 功能 | 描述 |
|---|---|
| 路由 (Routing) | 基於檔案系統的路由器，建構在伺服器元件 (Server Components) 之上，支援佈局 (layouts)、巢狀路由 (nested routing)、載入狀態 (loading states)、錯誤處理 (error handling) 等功能。 |
| 渲染 (Rendering) | 透過客戶端元件 (Client Components) 和伺服器元件 (Server Components) 實現客戶端渲染 (CSR) 和伺服器渲染 (SSR)。並透過 Next.js 的靜態渲染 (Static Rendering) 和動態渲染 (Dynamic Rendering) 進一步優化。支援 Edge 和 Node.js 運行時的串流 (Streaming)。 |
| 資料獲取 (Data Fetching) | 簡化資料獲取流程，在伺服器元件中使用 async/await，並擴展 fetch API 以實現請求記憶化 (request memoization)、資料快取 (data caching) 和重新驗證 (revalidation)。 |
| 樣式 (Styling) | 支援您偏好的樣式方法，包括 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 的原始路由器，可讓您建置伺服器渲染的 React 應用程式，並持續支援舊版 Next.js 應用程式。
在側邊欄頂部，您會注意到一個下拉選單，可讓您在 App Router 和 Pages Router 功能之間切換。由於每個目錄都有獨特的功能，因此務必注意當前選擇的是哪個選項。
頁面頂部的麵包屑導覽 (breadcrumbs) 也會顯示您正在查看的是 App Router 文件還是 Pages Router 文件。
預備知識
雖然我們的文件設計為對初學者友好，但我們需要建立一個基準，以便文件能專注於 Next.js 功能。每當引入新概念時，我們都會確保提供相關文件的連結。
為了充分利用我們的文件，建議您對 HTML、CSS 和 React 有基本了解。如果需要複習 React 技能，請查看我們的 Next.js 基礎課程，該課程將介紹基礎知識。
無障礙性
為了在使用螢幕閱讀器閱讀文件時獲得最佳無障礙體驗，我們建議使用 Firefox 和 NVDA，或 Safari 和 VoiceOver。
加入我們的社群
如果您對 Next.js 有任何疑問，隨時歡迎在 GitHub Discussions、Discord、Twitter 和 Reddit 上向我們的社群提問。