2020 年 11 月 18 日，星期三
逐步採用 Next.js
作者
Next.js 的設計宗旨是漸進式採用。使用 Next.js，您可以繼續使用現有的程式碼，並根據需要新增任意數量（或少量）的 React 程式碼。透過從小規模開始並逐步新增更多頁面，您可以避免全面重寫，從而防止功能開發工作脫軌。
許多公司需要現代化其技術堆疊，以降低成本、提高開發人員生產力，並為其客戶提供最佳體驗。元件驅動的開發極大地提高了現代程式碼庫的部署速度和可重用性。
React 每月下載量超過 800 萬次，是開發人員元件驅動開發的首選。Next.js 作為用於生產環境的 React 框架，可讓您逐步採用 React。
動機
在行動裝置日益普及的時代，改善和追蹤您的 核心網頁指標 對於成功至關重要。您的客戶可能遍布世界各地，網路速度也各不相同。網頁載入或動作完成時間每增加一秒（或甚至幾毫秒）都可能影響銷售、曝光或轉換率。
如果您正在更新技術堆疊，您可能會面臨以下挑戰：
- 您的應用程式有數年的遺留程式碼，難以理解，而且需要數年時間（以及數百萬美元）才能完全重寫。
- 隨著應用程式規模和複雜性的增加，您的頁面載入時間持續增加。簡單的行銷頁面和最複雜的頁面一樣慢。
- 您正在嘗試擴展開發團隊，但在現有程式碼庫中新增更多開發人員時遇到問題。
- 您的 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。
module.exports = {
basePath: '/store',
};要進一步瞭解 basePath，請參閱我們的文件。
（注意：此功能於 Next.js 9.5 及更高版本中引入。如果您使用的是舊版 Next.js，請先升級再試用。）
重寫
第二種策略是建立一個指向網域根 URL 的新 Next.js 應用程式。然後，您可以在 next.config.js 中使用 rewrites 將一些子路徑代理到現有的應用程式。
例如，假設您建立了一個 Next.js 應用程式，要從 example.com 提供服務，並使用以下 next.config.js。現在，您新增到此 Next.js 應用程式的頁面請求（例如，如果您新增了 pages/about.js，則為 /about）將由 Next.js 處理，而任何其他路由的請求（例如 /dashboard）將被代理到 proxy.example.com。
module.exports = {
async rewrites() {
return [
// we need to define a no-op rewrite to trigger checking
// all pages/static files before we attempt proxying
{
source: '/:path*',
destination: '/:path*',
},
{
source: '/:path*',
destination: `https://proxy.example.com/:path*`,
},
];
},
};要進一步瞭解重寫，請參閱我們的文件。
使用 Monorepos 和子網域的微前端
Next.js 和 Vercel 讓採用 微前端 並以 單體式儲存庫 (Monorepo) 方式部署變得更加容易。這讓您可以使用 子網域 逐步採用新的應用程式。微前端的一些好處：
- 程式碼庫更小、更具凝聚力且更易於維護。
- 具有去耦合、自治團隊的組織更具擴展性。
- 能夠以更漸進的方式升級、更新，甚至重寫前端的某些部分。
部署到 Vercel 的單體式儲存庫架構。
設定好單體式儲存庫後，即可照常將變更推送至 Git 儲存庫，您將會看到提交的內容部署到您已連線的 Vercel 專案。告別過時的 CI/CD 流程。
由 Git 整合提供的部署 URL 範例。
結論
Next.js 的設計理念是可以逐步整合至您現有的技術堆疊中。Vercel 平台透過與 GitHub、GitLab 和 Bitbucket 的無縫整合，為每次程式碼變更提供部署預覽，使其成為協作式的體驗。