逐步採用 Next.js | Next.js

Next.js 的設計宗旨是便於逐步採用。使用 Next.js 時，您可以繼續沿用現有程式碼，並按需求加入或多或少的 React 功能。透過從小規模開始並逐步增加頁面，您可以避免全面重寫所導致的功能開發延誤。

許多企業需要現代化其技術堆疊以降低成本、提升開發者生產力，並為客戶提供最佳體驗。元件驅動開發 (Component-driven development) 已大幅提升了現代程式碼庫的部署速度與可重用性。

而 React 作為領先的元件驅動選擇，每月下載量超過 800 萬次。Next.js 作為生產環境的 React 框架，讓您能夠逐步採用 React。

動機

在這個行動裝置普及的時代，改善並追蹤核心網頁指標 (Core Web Vitals) 對成功至關重要。您的客戶可能分佈在全球各地，網路速度各異。頁面載入或操作完成的每額外一秒（甚至毫秒）等待時間，都可能影響銷售、曝光或轉換率。

若您正在進行技術堆疊現代化，可能面臨以下挑戰：

應用程式含有多年遺留程式碼，難以理解且全面重寫需耗時數年（及數百萬美元）。
隨著應用程式規模與複雜度增長，頁面載入時間持續增加。簡單的行銷頁面與最複雜的頁面一樣緩慢。
嘗試擴展開發團隊時，發現難以在現有程式碼庫中新增開發人員。
持續整合/持續交付 (CI/CD) 與 DevOps 流程過時，降低開發者生產力且難以安全可靠地推出新變更。
應用程式未針對行動裝置響應式設計，且無法更新全域頁面樣式而不破壞其他部分。

您知道需要採取行動，但可能對從何開始感到不知所措。透過逐步採用 Next.js，您可以開始解決上述問題並改造應用程式。以下我們將討論幾種將 Next.js 整合至現有技術堆疊的策略。

策略

子路徑

第一種策略是配置您的伺服器或代理伺服器，使特定子路徑下的所有內容指向 Next.js 應用程式。例如，現有網站可能位於 example.com，您可以配置代理伺服器使 example.com/store 提供 Next.js 電子商務商店。

使用 basePath，您可以配置 Next.js 應用程式的資源與連結，使其自動適用於新的子路徑 /store。由於 Next.js 中每個頁面都是獨立路由，例如 pages/products.js 將在應用程式中路由至 example.com/store/products。

next.config.js

module.exports = {
  basePath: '/store',
};

欲了解更多關於 basePath 的資訊，請參閱我們的文件。

（**注意：**此功能於 Next.js 9.5 及以上版本引入。若您使用較舊版本，請先升級再嘗試。）

重寫

第二種策略是建立一個指向網域根 URL 的新 Next.js 應用程式。然後，您可以在 next.config.js 中使用 rewrites 將某些子路徑代理至現有應用程式。

例如，假設您建立了一個從 example.com 提供服務的 Next.js 應用程式，並使用以下 next.config.js。現在，您新增至此 Next.js 應用程式的頁面請求（如已新增 pages/about.js 時的 /about）將由 Next.js 處理，而其他路由的請求（如 /dashboard）將被代理至 proxy.example.com。

next.config.js

module.exports = {
  async rewrites() {
    return [
      // 需定義一個無操作重寫以觸發檢查
      // 所有頁面/靜態檔案，然後嘗試代理
      {
        source: '/:path*',
        destination: '/:path*',
      },
      {
        source: '/:path*',
        destination: `https://proxy.example.com/:path*`,
      },
    ];
  },
};

欲了解更多關於重寫的資訊，請參閱我們的文件。

微前端與單體倉庫及子網域

Next.js 與 Vercel 讓採用微前端 (Micro-Frontends) 並以單體倉庫 (Monorepo) 形式部署變得容易。這使您能使用子網域 (Subdomains) 逐步採用新應用程式。微前端的部分優勢包括：

更小、更內聚且易於維護的程式碼庫。
組織更具擴展性，團隊解耦且自主運作。
能以更漸進的方式升級、更新甚至重寫部分前端。

部署至 Vercel 的單體倉庫架構。

設定好單體倉庫後，照常推送變更至 Git 倉庫，您將看到提交內容部署至已連接的 Vercel 專案。告別過時的 CI/CD 流程。

Git 整合提供的部署 URL 範例。

結論

Next.js 專為逐步整合至現有技術堆疊而設計。Vercel 平台透過與 GitHub、GitLab 和 Bitbucket 無縫整合，為每次程式碼變更提供部署預覽，創造協作體驗。

使用快速刷新 (Fast Refresh) 立即本地預覽變更，提升開發者生產力。
推送變更以建立分支預覽 (Branch Preview)，優化與利益相關者的協作。
透過合併 PR 使用 Vercel 部署至生產環境。無需複雜的 DevOps。

欲了解更多，請參閱子路徑與重寫或部署微前端範例。