【NEXT.JS 系列】Next.js 是如何運作的 1

在學習更進階的 Next.js 功能之前，了解 Next.js 工作原理的基礎知識會很有幫助。

在本課程開始時，我們談到了 React 對您如何建立和架構應用程式的方式相對來說比較沒有意見—使用 React 建構應用程式可以有很多種方法。 Next.js 提供了一個框架來建構您的應用程式，以及有助於加快開發過程和最終應用程式的優化。

在接下來的部分中，我們將看看您的應用程式程式碼在這些不同階段會發生什麼：

• 程式碼運行的環境： Development vs. Production
• 當您的程式碼運行時：Build Time vs. Runtime
• 渲染發生的地方：Client vs. Server
  

現在讓我們深入研究這些概念並討論 Next.js 在幕後所做的一些過程。

開發與正式環境

您可以將環境視為程式碼運行的上下文。

在開發過程中，您正在本地計算機上建構和運行應用程式。 投入生產是使您的應用程式準備好被部署以及被用戶使用。

這如何適用於 Next.js

Next.js 為應用程式的開發和生產階段皆提供了功能。 例如：

• 在開發階段，Next.js 針對開發人員及其建構應用程序的體驗進行了優化。 它注重改善開發人員體驗的功能，例如 TypeScript 和 ESLint 整合、快速刷新等。
• 在生產階段，Next.js 針對最終用戶及其使用應用程式的體驗進行了優化。 它著重在轉換程式碼以使其具有高性能和可訪問性。
  

由於每個環境都有不同的考慮因素和目標，因此需要做很多工作才能將應用程式從開發轉移到生產。 例如，需要對應用程式程式碼進行編譯、捆綁、縮小化和程式碼拆分。

Next.js 編譯器

Next.js 處理大部分程式碼轉換和底層基礎設施，使您的應用程式更容易投入生產。

這之所以成為可能，是因為 Next.js 有一個用 Rust（一種低階程式語言）和 SWC（一個可用於編譯、縮小、捆綁等的平台）編寫的編譯器。

在下一節中，我們將探討這些轉換中的每一個是什麼。