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

若要從頭開始使用 React 建構完整的 Web 應用程式，您需要考量許多重要的細節

• 程式碼必須使用像 webpack 這樣的打包器進行捆綁，並使用像 Babel 這樣的編譯器進行轉換。
• 您需要進行生產環境最佳化，例如程式碼分割。
• 您可能想要靜態預先渲染某些頁面以提升效能和 SEO。您可能也會想要使用伺服器端渲染或用戶端渲染。
• 您可能必須撰寫一些伺服器端程式碼，以將您的 React 應用程式連接到您的資料儲存庫。

框架可以解決這些問題。但這樣的框架必須具有適當的抽象層級 — 否則它不會非常有用。它也需要有絕佳的「開發人員體驗」，確保您和您的團隊在編寫程式碼時擁有驚人的體驗。

Next.js：React 框架

隆重推出 Next.js，React 框架。Next.js 提供了上述所有問題的解決方案。但更重要的是，它讓您和您的團隊在建構 React 應用程式時，能輕鬆獲得成功。

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

• 直覺式的基於頁面的路由系統（支援動態路由）
• 預先渲染，在每個頁面的基礎上都支援靜態產生 (SSG) 和伺服器端渲染 (SSR)
• 自動程式碼分割，以加快頁面載入速度
• 具有最佳化預先載入的用戶端路由
• 內建 CSS 和 Sass 支援，以及對任何 CSS-in-JS 程式庫的支援
• 具有 Fast Refresh 支援的開發環境
• API 路由，可使用無伺服器函式建構 API 端點
• 完全可擴展

Next.js 已在數以萬計的生產環境網站和 Web 應用程式中使用，包括許多世界頂級品牌。

關於本教學課程

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

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

https://next-learn-starter.vercel.app （原始碼）

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

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

加入討論

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

讓我們開始吧！