頁面路由 (Pages Router)

全新 App Router 課程：您目前正在查看的是 Pages Router 課程。點此查看新的 App Router 課程。

若要從頭開始使用 React 構建完整的網頁應用程式，有許多重要的細節需要考慮：

• 程式碼需要使用像 webpack 這樣的打包工具進行打包，並使用像 Babel 這樣的編譯器進行轉換。
• 您需要進行生產環境優化，例如程式碼分割 (code splitting)。
• 您可能會為了效能和 SEO 而想預先靜態渲染 (pre-render) 某些頁面。您可能還想使用伺服器渲染 (SSR) 或客戶端渲染 (CSR)。
• 您可能需要編寫一些伺服器端程式碼來將 React 應用程式連接到資料儲存。

一個框架 (framework) 可以解決這些問題。但這樣的框架必須具有適當的抽象層級 — 否則它不會非常有用。它還需要具備出色的「開發者體驗 (Developer Experience)」，確保您和您的團隊在編寫程式碼時擁有絕佳的體驗。

Next.js：React 框架

這就是 Next.js，一個 React 框架。Next.js 為上述所有問題提供了解決方案。但更重要的是，它在構建 React 應用程式時能讓您和您的團隊處於成功的深淵 (pit of success) 中。

Next.js 旨在提供一流的開發者體驗和許多內建功能，例如：

• 直觀的基於頁面的路由系統（支援動態路由）
• 預渲染，支援每頁面的靜態生成 (SSG) 和伺服器渲染 (SSR)
• 自動程式碼分割以加快頁面載入速度
• 具有優化預取功能的客戶端路由
• 內建 CSS 和 Sass 支援，以及支援任何 CSS-in-JS 函式庫
• 支援快速刷新 (Fast Refresh) 的開發環境
• API 路由 可使用無伺服器函式 (Serverless Functions) 構建 API 端點
• 完全可擴展

Next.js 已被用於數以萬計的生產環境網站和網頁應用程式中，包括許多世界知名品牌。

關於本教程

這個免費的互動式課程將引導您如何開始使用 Next.js。

在本教程中，您將通過創建一個非常簡單的部落格應用來學習 Next.js 的基礎知識。以下是最終結果的範例：

https://next-learn-starter.vercel.app (原始碼)

本教程假設您具備 JavaScript 和 React 的基礎知識。如果您從未編寫過 React 程式碼，您應該先完成官方 React 教程。

如果您正在尋找文件，請訪問 Next.js 文件。

加入討論

如果您對 Next.js 或本課程有任何疑問，歡迎在 Discord 上向我們的社群提問。

讓我們開始吧！