跳至內容

1

關於 React 與 Next.js

Next.js 是一個靈活的 React 框架,它提供您建構快速、全端 網頁應用程式 的基礎組件。

但這究竟是什麼意思呢?讓我們花些時間深入了解 React 和 Next.js 以及它們如何協助您建構網頁應用程式。

網頁應用程式的基礎組件

在建構現代應用程式時,您需要考慮一些事項,例如:

  • 使用者介面 - 使用者將如何使用和與您的應用程式互動。
  • 路由 - 使用者如何在應用程式的不同部分之間導覽。
  • 資料擷取 - 您的資料存放位置以及如何取得資料。
  • 渲染 - 何時何地渲染靜態或動態內容。
  • 整合 - 您使用的第三方服務(例如 CMS、驗證、付款等)以及如何連線到它們。
  • 基礎架構 - 您部署、儲存和執行應用程式程式碼的位置(無伺服器、CDN、邊緣等)。
  • 效能 - 如何針對終端使用者最佳化您的應用程式。
  • 可擴展性 - 您的應用程式如何隨著您的團隊、資料和流量的增長而調整。
  • 開發者體驗 - 您的團隊建構和維護應用程式的體驗。

對於應用程式的每個部分,您都需要決定是自己建構解決方案還是使用其他工具,例如套件、函式庫和框架。

什麼是 React?

React 是一個用於建構互動式使用者介面的 JavaScript 函式庫

所謂使用者介面 (UI),指的是使用者在螢幕上看到並與之互動的元素。

User Interface example showing a browser window with a navigation, a sidebar, and a list of posts

所謂函式庫,是指 React 提供了許多實用的函式 (API) 來建構 UI,但讓開發者自行決定在應用程式中如何使用這些函式。

React 的成功部分原因在於它對應用程式建構的其他面向相對來說沒有太多限制。這也造就了第三方工具和解決方案蓬勃發展的生態系統,包括 Next.js。

然而,這也意味著從頭開始建構一個完整的 React 應用程式需要一些努力。開發者需要花時間設定工具,並為常見的應用程式需求重新設計解決方案。

什麼是 Next.js?

Next.js 是一個 React 框架,它提供了建構網頁應用程式的基礎模組。

所謂框架,是指 Next.js 處理了 React 所需的工具和設定,並為您的應用程式提供了額外的結構、功能和優化。

Diagram showing how Next.js spans the server and client, and provides additional features such as routing, data fetching, and rendering.

您可以使用 React 建構 UI,然後逐步採用 Next.js 的功能來解決常見的應用程式需求,例如路由、資料擷取和快取,同時提升開發者和終端使用者的體驗。

無論您是個人開發者還是大型團隊的一員,您都可以使用 React 和 Next.js 建構完全互動式、高度動態且高效能的網頁應用程式。

在接下來的章節中,我們將討論如何開始使用 React 和 Next.js。

您已完成本章1

現在您已經了解了 React 和 Next.js 是什麼。

下一步

2:渲染使用者介面 (UI)

學習使用者介面 (UI) 如何在瀏覽器中渲染的基礎知識。