與 Guillermo Rauch 一起粉碎 Podcast 第 23 集：Next.js 是什麼？

今天，我們談論的是 Next.js。 它是什麼，它在哪裡適合我們的 Web 開發工作流程？ 我與共同創作者吉列爾莫·勞赫（Guillermo Rauch）進行了交談以找出答案。

顯示註釋

• 吉列爾莫·勞赫在推特上
• Next.js

每週更新

• “掌握 React 中的 Props 和 PropTypes”
  大衛·阿德內耶
• “Bradbury Thompson 啟發的設計決策：平面設計的藝術”
  通過安迪克拉克
• “使用 Flask、Google 的 Cloud SQL 和 App Engine 設置 API”
  通過 Wole Oyekanmi
• “離子反應中的形式和驗證”
  通過傑里納維
• “如何幫助您的客戶通過設計獲得更多反向鏈接”
  蘇珊娜·斯卡卡

成績單

Drew McLellan：他是 Vercel 的創始人兼首席執行官，Vercel 是一個適合 Jamstack 工作流程的靜態站點雲平台。 他也是 Next.js 的共同創建者。 他之前創立了 LearnBoost 和 CloudUp，並以創建 Socket.io、Mongoose 和 SlackIn 等幾個流行的節點開源庫而聞名。 在此之前，他是 MooTools 的核心開發人員，所以我們知道他對 JavaScript 瞭如指掌。 你知道他曾經收到西班牙國王的皇家委託，用捲心萵苣製作冰雕嗎？ 我的好朋友，請歡迎 Guillermo Rauch。 嗨，吉列爾莫，你好嗎？

Guillermo Rauch：我非常棒，謝謝你邀請我。

Drew：我今天想和你談談 Next.js 的整個世界，因為顯然你個人對它非常了解，從一開始就作為共同創造者參與其中。 Next.js 是我在 Jamstack 領域工作時關注的那些項目名稱之一，但它並不是我之前親自看過或密切合作過的東西。 對於像我這樣可能不知道 Next.js 是什麼的人，也許你可以給我們一些背景知識，了解它是什麼以及它試圖解決什麼問題。

Guillermo： Next.js 是 Jamstack 世界中一個非常有趣的成員，因為 Next.js 實際上開始成為一個完全專注於 SSR 的框架。 它開始在 Jamstack 領域之外得到大量採用，人們在構建非常大的東西時，特別是當他們想要擁有用戶生成的內容或動態內容或社交網絡或電子商務時，他們知道他們想要 SSR，因為他們的數據集是非常大或非常動態。 我認為 Jamstack 世界中的很多人都沒有註意到它，但後來 Next.js 獲得了靜態優化的能力。

Guillermo：一方面，例如，如果您不使用 Next.js 在頁面的頂層進行數據獲取，那麼您的 React 頁面將是……順便說一下，對於那些不完全了解的人， Next.js 只是用於生產的 React 框架，但具有執行某些渲染的能力。 然後，當您獲得靜態優化功能時，如果您不在頁面的頂層定義數據獲取，它會自動導出為 HTML，而不是嘗試對服務器渲染做任何事情。

Guillermo：後來，它還獲得了靜態站點生成的能力，這意味著您可以定義一個特殊的數據掛鉤，但該數據掛鉤在構建時獲取數據。 Next.js 成為了一個混合的、非常強大的動態和靜態框架，現在它在 Jamstack 領域也有了很大的發展。

Drew：人們可能會說 Rea​​ct 已經是一個框架，你肯定聽說過它是這樣描述的。 成為 React 的框架實際上意味著什麼？

Guillermo：這是一個很好的觀察，因為我總是向人們指出，Facebook 上的 React 和 Facebook 之外的 React 是完全不同的野獸。 Facebook 的 React 實際上與服務器渲染一起使用，但即使是他們的服務器渲染，例如，也不使用 Node.js，它使用一個名為 Hermes 的高度專業化的虛擬機，它與他們的生產黑客和 PHP 堆棧和答案進行通信所有這些先進和異國情調的 Facebook 需要。

Guillermo：當他們開源 React 時，幾乎就像開源一個組件一樣。 我總是把它稱為開源引擎，而不是給你汽車。 發生的事情是人們真的想帶著它去開車，他們想用 React 去地方。 在社區中，人們開始創造汽車，他們將 React 作為引擎嵌入，這​​也是司機、開發人員首先追求的，讓 React 成為汽車的基礎部分。 Next.js、Gatsby 和 React Static 以及許多其他框架開始出現，它們解決了“我實際上想要創建完全加載的頁面和應用程序”之類的需求。

Guillermo：雖然 React 更像是頁面中特定小部件的組件和引擎，但 Facebook 肯定是這種情況。 他們會廣泛公開地承認，他們發明它是為了通知批處理、聊天小部件、新聞提要組件等，這些組件是 React 路由，它們被嵌入到生產現有應用程序的內容中，包含大量代碼行甚至其他 JS 庫和框架。

Guillermo：為 React 創建一個框架意味著什麼，這意味著你讓 React 成為故事的基礎部分，希望這是我們將嘗試用 Next.js 做的事情，學習曲線主要是關於 React 的一些附加內容Next.js 的表面，尤其是在數據獲取和路由方面。 我們也做了很多生產優化，所以當你得到 React 時，當你得到 Create React 應用程序時，有點像，我喜歡稱它為 Facebook 給你的引導車，也許生產的需求並沒有真正滿足. 或者如果你嘗試自己通過配置 Webpack 和配置 Babel 以及配置服務器渲染和靜態生成來完成，那麼從頭開始組裝汽車也很困難。 Next.js 將為您提供這個零配置以及圍繞使用 React 構建整個大型事物的生產優化默認設置。

Drew：所以它幾乎在你的 React 應用程序周圍建立了一種生態系統，其中包含一組預配置的工具，使你能夠——

吉列爾莫：正確。

Drew：立即著手進行靜態站點生成或服務器渲染或路由。

Guillermo：正確，你在那裡使用了一個非常非常關鍵的詞，它是預先配置的。 作為 Next.js 的貢獻者，我們有幸引起了 Google Chrome 的注意。 這個項目的領導者之一，她的事情是，當他們在谷歌內部開發框架時，他們面臨著社區和開源今天面臨的許多相同問題。 在如何擴展和製作開箱即用的真正高性能網絡應用程序方面，谷歌有許多不同的競爭舉措。

Guillermo：您將以 Google 員工的身份加入，您將獲得一個框架，您可以使用該框架創建非常大的生產就緒、非常高性能的應用程序。 Shubie 是其中許多舉措的一部分，她發現要使框架大規模成功有兩個關鍵要素。 一個是預配置，這意味著您開始工作，您將要啟動一個全新的應用程序，您應該得到一些已經準備就緒並滿足當時已知的許多生產需求的東西及時。

Guillermo：另一方面，我們正在努力實現的另一個真正重要的步驟是一致性。 您可以獲得最優化的生產就緒的預配置框架，但是如果您繼續進行，例如，開始引入大量重度依賴項或第三方腳本，或者使用需要很長時間繪製的非常低效的佈局等等依此類推，那麼您將浪費這種預先配置。 隨著時間的推移，通過混合預配置和一致性，開發人員不僅有一個很好的起點，而且隨著時間的推移它也被引導到成功。

Drew：看起來 Next.js 的一個特點，就是它很自以為是，UI 層是 React，它使用類型腳本，使用 Webpack，這些都是項目做出的選擇，這就是你得到的。 如果我錯了，請糾正我，但你不能將 React 換成 Vue，例如在 Next.js 中。

Guillermo：這是一個很好的觀點，技術決策符合某種藝術。 一方面，我真的很想說 Next 是非常無主見的，原因是如果你專門去 github.com/vercel/nextjs 和示例目錄，你會發現幾乎就像一個可以與 Next.js 一起使用的技術組合爆炸式增長。 你會看到 fire-based，你會看到 Graphic UL，你會看到 Apollo，你會看到 Redux，你會看到 MobX，在 CSS 空間裡還有更多的選擇。

Guillermo：我們有一個嵌入的默認 CSS 端口，但是您可以使用它的兩種風格，一種帶有導入，一種帶有樣式標籤，我們稱之為 Style JSX，它非常類似於 Shadow CSS 的 Web 平台方法。 我的意思是沒有意見的原因是我們希望 Next.js 非常接近網絡的“裸機”，而不是引入許多如果 10 年後的今天的網絡將與之不兼容的原語。 然後，如果您查看示例，您會發現可以插入所有這些其他技術。

Guillermo：基本觀點是有 React，你無法取代它，至少在短期內是這樣。 然後是你應該可以創建頁面的概念，這在我們剛推出時有點像一個新事物，每個人都在嘗試創建單頁面應用程序。 我們意識到，就像互聯網是由具有大量頁面的網站組成的，這些頁面通過搜索引擎、Twitter、Facebook、社交網絡、電子郵件同伴創建不同的入口點，就像你總是引導人們走向入口點一樣，並且通過該入口點的那個人不應該下載整個應用程序的負擔。

Guillermo：然後這條路徑引導我們實現服務器渲染，然後為多個頁面進行靜態生成，等等等等。 另一個基本觀點是 Next 應該是一個適用於 web 的框架，而不是反對 web。 然後最重要的是，React 缺少數據獲取和路由原語，我們添加了這些。 有一定程度的意見需要處理，就像每個人都需要路由器一樣，所以還不如默認內置一個路由器。

Drew：擁有這些默認值的最大優勢是它消除了很多選擇的複雜性，它就在那裡，它已經配置好了，你可以開始使用它而無需考慮太多，因為我認為我們都已經-

吉列爾莫：沒錯。

德魯：在使用什麼組件有太多選擇的情況下，這可能會讓人不知所措，並妨礙工作效率。

吉列爾莫：沒錯。

Drew：您認為人們將 Next.js 用於哪些類型的項目？ 它基本上適用於您可能構建生產 React 應用程序的任何情況，還是更適合特定類型的內容繁重的網站？ 從這個意義上說重要嗎？

Guillermo：是的，所以這是一個關於網絡的古老爭論，網絡是應用程序，網絡是網站，它是混合體嗎？ JavaScript 等的作用是什麼？ 很難給出一個直截了當的答案，但我對此的看法是，網絡總是演變為內容的混合體，而這些內容正在演變為對用戶來說越來越動態和個性化。 即使您說像內容網站，世界上的高端內容網站也擁有與應用程序非常相似的代碼庫。

Guillermo：這裡有一個很好的例子，比如《紐約時報》，他們會為你提供帶有數據分析工具和交互式動畫的嵌入式小部件，他們會推薦接下來要閱讀的故事，並且他們有一個內置的訂閱模型，有時會給你部分內容，有時還會計算您閱讀了多少篇文章。 就像我在網絡發明時告訴你的那樣，蒂姆·伯納斯-李會說，“不，這太瘋狂了，這在網絡上是不可能的”，但這就是我們今天擁有的網絡。

Guillermo： Next.js 正在滿足很多這些複雜的現代需求，這意味著你會看到很多電子商務的使用，你會看到很多內容。 順便說一下，電子商務的意思，不僅僅是購買商品，還包括網絡上最大的房地產網站 realtor.com、zillow.com、trulio.com 等體驗，整個類別都是 Next.js，然後是內容網站。 我們剛剛以 Vercel 和 Next.js 的客戶身份加入了washingtonpost.com，然後我們有了第三個類別，它更加新興但非常有趣，它是完整的應用程序和用戶生成的內容，比如 tiktok.com，有點像你會認為原始的單頁應用程序用例在那裡也得到了很好的體現。

Guillermo： Next.js 在您需要大量內容且必須非常、非常快速地提供服務、必須進行 SEO 優化，並且歸根結底是動態和靜態的混合體時，會非常出色。

德魯：我之前和馬西·薩頓談過蓋茨比，這似乎是在類似的領域。 看到一個問題的解決方案不止一種，並且可以從一個項目到下一個項目進行選擇，這總是很棒的。 你會說 Next.js 和 Gatsby 在同一種問題空間中運行，它們有多大相似或不同？

Guillermo：我認為某些用例存在重疊。 例如，我的個人博客 rauchg.com 在 Next.js 上運行，它也可能是一個很棒的 Gatsby 博客。 在較小的靜態網站類型的空間中存在重疊，我並不是說不相關。 許多超級、超級重要的 dotcom 都在基本靜態的網絡上運行，所以這就是我認為 Jamstack 的美妙之處。 因為 Next.js 可以靜態優化您的頁面，然後您可以通過它獲得出色的 Lighthouse 分數，您可以將它用於重疊的用例。

Guillermo：我認為當你開始進入更動態的需求並且你有很多頁面時，這條線就會被劃清，你需要一次更新它們。 儘管 Gatsby 正在為這些創建解決方案，但 Next.js 已經有生產就緒的實時解決方案，可以與任何類型的數據庫、任何類型的數據後端一起使用，基本上可以“生成”或“打印”大量頁面。 這就是今天客戶使用 Next.js 而不是 Gatsby 的地方。

Drew：隨著基於 JavaScript 的解決方案變得越來越大，每個人似乎都會遇到的問題之一是性能，以及事情如何開始變得非常緩慢，你有很大的包大小。 傳統上，要正確配置代碼拆分等事情可能相當複雜。 我看到這是 Next.js 的一大特色，它聲稱代碼拆分是自動的。 Next.js 在代碼拆分方面做了哪些工作？

Guillermo：你的觀察是 100% 正確的。 網絡上最重要的事情之一和網絡上最大的權重之一是 JavaScript，就像不同的材料具有不同的密度和權重而與實際物理體積無關一樣，JavaScript 往往是一個非常密集、沉重的元素。 即使是少量的 JavaScript 與例如可以在主線程之外異步處理的圖像相比，JavaScript 也往往特別麻煩。

Guillermo： Next.js 投入了大量精力來自動優化你的包。 當我第一次想到 Next.js 的想法時，我的第一個直覺是你要定義，例如，10 條路線。 在 Next.js 世界中，您創建一個 pages 目錄並將文件放入 Index.js、About.js、Settings.js、Dashboard.js、Termsofservice.js、Signup.js、Login.js。 這些成為您可以通過各種媒體共享的應用程序的入口點。

Guillermo：當您輸入這些內容時，我們希望首先為您提供與該頁面相關的 JS，然後可能是一個公共捆綁包，以便系統內的後續導航非常靈活。 Next.js 也非常非常好，它會自動預取連接到該入口點的其餘頁面，這樣感覺就像一個單頁應用程序。 很多人說，“如果我知道我可能有幾條路線，為什麼不直接使用 Create React 應用程序呢？” 我總是告訴他們，“看，你可以找到那些頁面，因為 Next.js 會自動預取連接的那些，你最終會得到你的單頁應用程序，但它在初始繪製方面得到了更好的優化，那個最初的切入點。”

Guillermo：那是最初的代碼拆分方法，但隨著時間的推移，它變得更加複雜。 谷歌提供了一個非常好的優化，稱為 Module 和 No Module，它將為現代瀏覽器提供差異化的 JS，為其他瀏覽器提供大量多域的遺留 JS，並且這種優化 100% 自動化並產生大量節省。 我們把它交給了我們在 Vercel 上託管的一個客戶，叫做 Parnaby's，我相信如果我沒記錯的話，這是非常非常重要的事情。 這可能節省了 30% 的代碼大小，這僅僅是因為他們將 Next.js 升級到了更好地優化 JS 包的版本。

Guillermo：這就是我們之前討論過的一點，那就是你選擇 Next.js，隨著時間的推移它只會變得更好、更優化，它會繼續代表你優化事情。 老實說，這些都是您永遠不必處理或打擾的預配置，以及您甚至不想做的研究。 好像我並沒有很明顯地參與其中，但我查看了一些內部討論，他們正在討論所有這些只對 Internet Explorer X 和 Soho 重要的多域，我想，“我什至不想知道，讓我們升級 Next.js 並獲得所有這些好處。”

Drew：堅持默認設置和最常見的配置有時會有很大的好處，這似乎真的是 Next.js 方法。 我記得當我在 2000 年代初開始編寫 PHP 時，每個人都在使用 PHP 和 MySQL，當時我剛從 Windows 出來，所以我想使用 PHP 和 Microsoft Sequel Server。 你可以做到，但你一直在逆流而上。 然後，一旦我切換到 MySQL，整個生態系統就開始為我工作，我不需要考慮它。

吉列爾莫：是的，一切都只是點擊，這是一個很棒的觀察。 我們一直都看到，就像 Babel 生態系統現在如此強大一樣，你可以通過將 Babel 換成其他東西來變得更快一些，但隨後你就需要犧牲令人難以置信的生態系統兼容性。 這是你之前提到的性能問題，對於很多人來說，構建性能和靜態生成性能是一個很大的瓶頸，這是我們在逐步提高工具性能方面非常努力的事情。

Guillermo：例如，Next.js 現在正在做的事情之一是將其默認值從 Webpack 4 升級到 Webpack 5，這有一些破壞性的東西，這就是為什麼我們首先將它作為一種選擇提供給人們-在標誌中，但稍後它將成為默認值。 Webpack 5 取得了令人難以置信的性能改進，但我們並沒有犧牲 Webpack 生態系統，而是逐步改進。 當然，有一些非常小的東西需要犧牲，但這是當今 JS 生態系統的一個令人難以置信的好處，我認為很多人都在掩飾，因為也許他們看到，“哦，我們本可以做到 X在 Soho 中，也許它會更快一點，或者在 Soho 中的 MPM 會花費更少的時間。” 他們抓住了一些細節，卻錯過了更大的圖景，即生態系統價值巨大。

Drew：由 Next.js 之類的項目完成所有配置和維護以及它的另一面的價值，而不是通過交換使用其他東西來自己承擔，這是令人難以置信的，因為一旦你離開這些默認值，您正在承擔保持所有兼容性並自己完成的負擔。 我對 Next.js 真正感興趣的一件事是，有一些選項可用於進行靜態站點生成或服務器端渲染，或者可能是兩者的混合。 我認為在最近的更新中對此進行了一些更改，您能告訴我們一些關於這一點的信息以及您何時可以選擇其中一個嗎？

吉列爾莫：是的，當然。 這種混合方法與我之前描述的頁面系統相結合的關鍵組件之一是，您可以擁有完全靜態的頁面或服務器呈現的頁面。 完全靜態的頁面具有我稱之為靜態提升的令人難以置信的好處，即您可以獲取該資產並自動將其放在邊緣。 把它放在邊緣，我的意思是你可以緩存它，你可以搶先緩存它，你可以復制它，你可以讓它當請求進來時，它永遠不會觸及服務器，因為我們提前知道，“嘿，Slash Index 是靜態的。”

Guillermo：當涉及到為全球觀眾服務時，這是一個非常非常有趣的好處。 您基本上可以獲得開箱即用的自動 CDN，尤其是當您部署現代邊緣網絡（如 Vercel 或 AWS Amplify 或 Netlify 等）時。 Next.js 有個前提，能不能做成靜態的，就應該是靜態的。 當你第一次開始一個項目並且你正在處理你的第一頁或者你正在踢框架的輪胎時，不妨讓一切都是靜態的。

Guillermo：即使對於高端需求，例如 vercel.com，我們自己對 Next.js 的使用也是完全靜態的。 它是完全靜態和靜態站點生成的結合，所以我們所有的營銷頁面都是靜態的，我們的博客是從動態數據源靜態生成的，然後是我們的儀表板，其中包含大量動態數據，但我們可以將其作為外殼或骨架交付，與查看部署、查看項目、查看日誌等相關的所有頁面基本上都是帶有客戶端 JavaScript 的靜態頁面。

Guillermo：這對我們來說非常好，因為我們需要非常快速的第一窗格性能的所有內容都已經預渲染，需要 SEO 的所有內容都已經預渲染，以及非常動態的所有內容，我們只需要擔心安全性，因為例如，從客戶端的角度來看，它使用相同的 API 調用，例如，我們的 CLI 使用或我們的集成使用等等。 一個完全靜態的網站，運行起來非常便宜，具有難以置信的可擴展性等等。

Guillermo：現在，我們的博客需要做的一件特別的事情是我們希望非常快速地更新數據。 我們希望非常快速地修復一個錯字，而不是等待整個構建發生，這是 Next.js 的一個非常重要的好處，當您從靜態跨越到動態時，它也會在解決方案之間為您提供這些. 對於我們的博客，我們使用了增量靜態生成，因此本質上我們可以在底層內容髮生變化時一次重建一個頁面。

吉列爾莫：想像一下，我們不僅有幾百篇博客文章，而且我們有很多博客文章一直在生成並一直在更新，就像我提到我們的一位客戶華盛頓郵報一樣，在這種情況下你需要離開更傾向於完整的 SSR，尤其是當您開始為每個用戶自定義內容時。 我剛剛描述的複雜旅程從我有一個營銷頁面開始，到我有一個有幾千頁的博客，再到我有數万或數百萬頁。 這就是您可以在自己的業務中穿越的 Next.js 旅程。

Guillermo：然後你作為開發人員開始在可能更少的責任和更多的責任之間做出選擇，因為當你選擇使用 SSR 時，你現在在服務器上執行代碼，你在雲上執行代碼，有更多的責任更多的權力。 您可以決定在哪裡使用每種工具這一事實是我認為 Next 的一個非常非常有趣的好處。

Drew：就結合靜態站點生成和服務器端渲染的實用性而言，這在服務器元素方面是如何工作的？ 您是否需要像 Vercel 這樣的專用平台來實現這一目標，還是可以更直接、更簡單地完成？

Guillermo： Next.js 為您提供了一個開發服務器，因此您下載 Next 並運行您的 Next Dev，這就是開發服務器。 開發服務器顯然針對開發進行了令人難以置信的優化，就像它擁有 Facebook 發布的最新快速刷新技術一樣……實際上，Facebook 並沒有發布它，Facebook 在內部使用它來獲得最佳、最高性能和最可靠的熱模塊替換，這樣你基本上是在打字，它的變化會反映在屏幕上，這就是開發服務器。

Guillermo：然後 Next 為您提供了一個名為 Next Start 的生產服務器，Next Start 具有自託管框架的所有功能。 Vercel 的有趣之處在於，當您將 Next 部署到它時，它會自動優化，並且它是 100% 無服務器的，這意味著無需負責管理、擴展、​​兌現和兌現驗證、清除、複製、全局故障轉移等等。等等，當你自己運行 Next Start 時，你必須承擔。

Guillermo：這也是 Next.js 的巨大好處，例如，apple.com 在 Next.js 上具有幾個不同的屬性、子域和 dotcom 頁面，它們自託管，這是由於非常非常先進和嚴格的安全和隱私需求. 另一方面，washingtonpost.com 使用 Vercel，因此我們擁有如此廣泛的用戶，我們非常樂意為所有用戶提供支持。 在我看來，無服務器的發展方向的好處是，它可以為您提供兩全其美的最佳性能，隨著時間的推移只會變得更好，最好的開發人員體驗就像，“嘿，我沒有擔心任何類型的基礎設施。”

Drew： Next.js 是一個開源項目，由 Vercel 的團隊開發。 Vercel 之外還有其他貢獻者嗎？

Guillermo：是的，所以穀歌瀏覽器是主動提交服務器 PR 的主要瀏覽器，它幫助我們優化並與合作夥伴一起測試它，比如已經是谷歌生態系統一部分的非常大的 Next.js 用戶，例如，由於使用了很多和許多應用程序，因此他們需要作為合作夥伴密切參與。 Facebook，我們與 Facebook 團隊保持著良好的關係。 例如，快速刷新，我們是第一個實現該功能的 React 框架，它們幫助指導我們了解他們在 Facebook 使用 React 和快速刷新所學到的所有知識。

Guillermo：我們與許多合作夥伴合作，這些合作夥伴在野外部署了大量 Next.js 應用程序，來自各種不同類型的用例，比如想像電子商務和內容。 然後有很多獨立貢獻者，個人使用 Next.js 的人，還有教育工作者和大公司前端基礎架構團隊的成員。 這是一個非常非常廣泛的社區努力。

Drew：聽起來有人可能會擔心，這是 Vercel 正在開發的重要部分，他們可能會擔心他們會被鎖定在特定平台上的部署，但聽起來很像根本不是這樣，他們可以開發一個站點並將其部署在 Firebase 或 Netlify 或……

吉列爾莫：是的，當然。 我喜歡在某種程度上將它與前端時代的 Kubernetes 進行比較，因為歸根結底，我堅信……幾乎每個人在需要運行 Linux 進程時都需要 Kubernetes ，就像您在談論自以為是並且您說這是一項很好的技術，它非常不自以為是，但是我們有點忘記了一些自以為是。 就像在一天結束時，它源於運行打包為容器的特定 Linux 程序惡魔。

Guillermo： Next 處於類似的位置，因為我們將世界的通用原語視為 React 組件，顯然這是固執己見，但我們確實認為，對於很多企業來說，就像他們都傾向於 Linux 一樣，我們是在 React 和 Vue 上看到同樣的事情，但幸運的是 Vue 也有 Nuxt，這是一個非常棒的解決方案，它在構思和原則上與 Next 相當。 我們傾向於像 Next.js、Nuxt 和 Svelte 生態系統的 Sapper 這樣的平台。

Guillermo：我認為這些應該是開放平台，因為如果每個人都需要這個，還不如重新發明整個行業的輪子，對吧？ 我們非常歡迎這個職位，我們歡迎人們部署它，重新配置它，重建它，重新分配它等等。

Drew：就在最近發布了一個新版本的 Next.js，我認為是 9.5 版。 該版本有哪些重大變化？

Guillermo：最棒的是，正如我之前所說，很多事情開始是靜態的，然後隨著事情的發展變得更加動態。 順便說一句，這是 WordPress 的冒險。 WordPress 一開始是基於靜態文件數據庫的方法，然後發展到需要數據庫，有點像你描述的 PHP 是如何演變成越來越多的 MySQL 的。 Next.js 9.5 的優點在於它使增量靜態生成成為生產就緒功能，因此我們將其從不穩定標誌中刪除。

Guillermo：這個特性讓你可以在不放棄所有靜態優勢的情況下完成從靜態到動態的旅程，也不必為服務器渲染的動態而全力以赴，因此它延長了你的靜態的有用生命週期。 例如，我們在 Vercel 使用它的方式，就像我提到的，就像我們的博客在構建時完全預渲染，但是例如，我們實際上將在幾分鐘內發布一個重大公告，以及何時我們發布關於它的博客，我們希望能夠對其進行調整、修復、預覽等等，而不必在每次更改一篇博文的一個字母時發布 5 到 10 分鐘的構建。

Guillermo：通過增量靜態生成，您可以一次重建一個頁面。 取決於您的網站有多大，可能需要幾分鐘甚至幾秒鐘的時間，現在只需要幾毫秒。 同樣，您不必放棄靜態的任何好處。 這可能是我最興奮的事情，它在 Next.js 9.5 上變得穩定了，特別是因為 JS 社區和 React 社區以及框架社區和靜態站點生成社區一直在談論這個為它製作靜態增量的獨角獸a long time, so the fact that Next.js did it, it's being used in production and it's there for everybody to use, I think it's a major, major, major milestone.

Guillermo: There's lots of little DX benefits. One that's really nice in my opinion is Next.js, as I said, has a page system. You would argue, “Okay, so let's say that I'm uber.com and I've decided to migrate on Next.js, do I need to migrate every URL inside over to Next.js in order to go live?” This has become a pretty important concern for us, because lots of people choose Next.js, but they already are running big things, so how do you reconcile the two?

Guillermo: One of the things that Next.js allows you to do in 9.5 is you can say, “I want to handle all new pages that I created with Next.js with Next.js, and the rest I want to hand off to a legacy system.” That allows you incremental, incremental is the keyword here today, incremental adoption of Next.js. You can sort of begin to strangle your legacy application with your Next.js optimized application one page at a time, when you deploy and you introduce in your Next.js page, it gets handled by Next. If it doesn't match the Next.js routing system, it goes to the legacy system.

Drew: That sounds incredibly powerful, and the incremental rendering piece of that, I can think of several projects immediately that would really benefit that have maybe 30-minute build times for fixing a typo, as you say. That sort of technology is a big change.

Guillermo: We talked to one of the largest, I believe, use cases in Jamstack in the wild, and it was basically a documentation website and their build times were 40 minutes. We're doing a lot in this space, by the way, like we're making pre-rendering a lot faster as well. One of my intuitions for years to come is that as platforms get better, as the primitives get better, as the build pipelines get better we're going to continue to extend the useful lifetime of statics. Like what ended up taking 40 minutes is going to take four.

Guillermo: A great example is we're rolling out an incremental build cache, as well, system. I sort of pre-announced it on Twitter the other day, we're already seeing 5.5 times faster incremental builds. One of the things that I like about Jamstack is that the core tenet is pre-render as much as possible. I do think that's extremely valuable, because when you're pre-rendering you're not rendering just in time at runtime. Like what otherwise the visitor would incur in in terms of rendering costs on the server gets transferred to build time.

Guillermo: One of the most exciting things that's coming to Next is that without you doing anything as well, the build process is also getting faster. On the Vercel side, we're also taking advantage of some new cloud technology to make pre-rendering a lot faster as well. I think we're always going to live in this hybrid world, but as technology gets better, build times will get better, pre-rendering will get better and faster, and then you'll have more and more opportunities to do kind of a mix of the two.

Drew: Sounds like there's some really exciting things coming in the future for Next.js. Is there anything else we should know before we sort of go away and get started working with Next.js?

Guillermo: Yeah. I think for a lot of people for whom this is new, you can go to nextjs.org/learn, it'll walk you through building your first small static site with Next.js, and then it'll walk you through the journey of adding more and more complexity over time, so it's a really fun tutorial. I recommend also staying tuned for our announcement that I was just starting to share on twitter.com/vercel, where we share a lot of Next.js news. Specifically we highlight a lot of the work that's being done on our open source projects and our community projects and so on. For myself as well, twitter.com/rauchg if you want to stay on top of our thoughts on the ecosystem.

Drew: I've been learning all about Next.js today, what have you been learning about lately, Guillermo?

Guillermo: As a random tangent that I've been learning about, I decided to study more economics, so I've been really concerned with like what is the next big thing that's coming in terms of enabling people at scale to live better lives. I think we're going through a transition period, especially in the US, of noticing that a lot of the institutions that people were “banking on”, like the education system, like the healthcare system, a lot of those, like where you live and whether you're going to own a house or rent and things like that, a lot of these things are changing, they have changed rapidly, and people have lost their compass.

Guillermo: Things like, “Oh, should I go to college? Should I get a student loan?” and things like that, and there is a case to be made for capitalism 3.0, and there is a case to be made for next level of evolution in social and economic systems. I've been just trying to expand my horizons in learning a lot more about what could be next, no pun intended. I've found there's lots of great materials and lots of great books. A lot of people have been thinking about this problem, and there is lots of interesting solutions in the making.

德魯：這很有趣。 If you, dear listener, would like to hear more from Guillermo, you can find him on Twitter at @RauchG, and you can find more about Next.js and keep up to date with everything that goes on in that space at nextjs.org. Thanks for joining us today, Guillermo. 你有什麼離別詞嗎？

Guillermo: No, thank you for having me.