[譯] 為什麼我會選擇 React + Next.js，而不是 Vue 或 Angular？
作者｜TimZaložnik
譯者｜謝麗
本文的目的不是要對 React、Vue 和 Angular 三者進行比較，已經有許多人對這個話題進行了比較深入的探討。
每個人都有自己的偏好。與其他庫和框架相比，我更喜歡使用 React 構建使用者介面。在我解釋了為什麼之後，也許你也會切換到 React，如果你現在還沒有用它的話。
幾個月前，我正在尋找一個用於 React 的樣板檔案生成器或是初學者工具包。我向往簡單可靠的東西。經過長時間的搜尋，我找到了自己想要的東西。那就是名為 Next.js 的框架。
它在 GitHub 上獲得了大量的 star 數，這在我看來是一大優勢。這意味著這個專案的未來可期，而且如果需要，你可以向社群尋求幫助。
在 readme 檔案的頂端，有一個指向 learnnextjs.com 的連結。一個大約 1 小時的短教程，教你如何使用 Next.js。我不是說簡介，而是讓你可以真正地開始構建應用。真的很棒！
為什麼是 Next.js？
我發現，Next.js 比其他可選的方案要簡單的多，也更有效率。
Create React App 在 GitHub 上的星數更多，而且承諾零構建配置。但是，它不像看上去那麼簡單。你需要學習客戶端路由、頁面佈局等等，更不用說伺服器端渲染了。
而對於 Next.js，你只要幾個小時就可以用它進行開發了。
越來越多的人喜歡 Vue，即使它在某些方面仍然比不上 React 和 Angular。因為它簡單，你可以用最少的時間完成最多的事情。在我看來，Next.js 填補了 React 和 Vue 之間的空白，使 React 一飛沖天。
Vue 似乎是一個不錯的選擇，Angular 呢？
這兩個都是排名很靠前的框架，提供了出色的支援、效能，而且未來可期。但是，在和 Next.js 搭配使用時，我只會選擇 React，而不是它倆中的一個。
我一直將 Vue 視為入門級應用和網站的最佳選擇。我以前甚至還寫過幾篇文章，但是，React 與 Next.js 的搭配是最省力的。有人可能會說這是孩子的遊戲。
公平地講，React 入門並沒有那麼難。它的學習曲線稍微有點陡峭，但你最終會得到回報。
考慮到這一點，React 就佔了上風。它更成熟、更可靠，有更大的社群和 Facebook 的支援。
Angular
在我的印象中，Angular 一直是一個重要而成熟的框架，但是，我不會選擇它。因為我不喜歡它。
雖然 TypeScript 也是一個選項，但你似乎是被迫在使用它。整個框架看上去過於複雜，而且沒有明確的理由。最糟糕的是，我似乎找不到任何值得我經歷這些麻煩去使用它的地方。
Next.js 的特性
下面是 learnnextjs 上列出的一些很棒的 Next.js 特性：
-
預設伺服器端渲染；
-
為加速頁面載入，自動進行程式碼分割；
-
簡化客戶端路由（基於頁面）；
-
基於 Webpack 的開發環境，支援熱模組更換 (https://webpack.js.org/concepts/hot-module-replacement/)（HMR）；
-
可以通過你自己的 Babel 和 Webpack 配置進行定製；
讓我稍微解釋下這些特性。
應用被分成塊在伺服器端渲染，載入時間非常短。甚至，對於不支援客戶端渲染的搜尋引擎，SEO 都沒有意義。
路由解決方案和 Webpack 都有了很好的支援。然後是熱模組更換（HMR）可以為你節省寶貴的開發時間，因為只需上傳變化的程式碼就可以。最後，它提升了開發者體驗（DX）。
它是如何使我的工作變得更輕鬆的？
每當我開始建立一個新專案時，我必須建立一堆依賴關係和指令碼，使一切正常執行。我不得不做一些事情，如安裝 node-sas、設定監控、編寫 npm 指令碼等。
甚至在我真正地開始應用開發的前夕，我還得管理幾十個依賴項。Next.js 使我可以跳過這些我每次都會遇到的繁瑣工作。它使我可以在幾分鐘內開始任意一個專案。
Next.js 提供了內建的 CSS 支援，稱為 styled-jsx。我必須承認，我直到最近才使用它，因為它還無法與其他類似的解決方案相比，如 styled-components 或 JSS。但是，最近他們釋出了版本 2，比第一個版本有了很大的改進，並且有很大的潛力。
以下是他們列出的一些特性：
-
完全支援 CSS，沒有電量方面的權衡；
-
執行時大小僅有 3KB（從 12KB 經 gzip 壓縮）；
-
選擇器、動畫、關鍵幀完全隔離；
-
內建 CSS“瀏覽器引擎字首（vendor prefixing）” ；
-
最低限度的轉譯快速而高效；
-
非伺服器端渲染時的高效能執行時 CSS 注入；
-
未來可期：與伺服器端可渲染的“Shadow CSS”相當；
-
“源對映（Source maps）” 支援；
-
支援動態樣式和主題；
-
基於外掛的 CSS 預處理。
你需要知道的是，它非常快、非常靈活，最重要的是，它與 JSX 以及 React 的思想一致。你不需要設定任何東西，什麼都為你準備好了。
不過，如果你仍然希望使用以前的 CSS 前處理器，你也可以使用。關於 LESS、SASS、PostCSS 和 CSS-Modules，我都有點忘了，但如果你還喜歡它們，當然就可以使用它們。
作為 styled-jsx 的替代方案，我推薦 Material-UI-Next。這是一個不怎麼有名的 React 元件，實現了谷歌的 Material Design。它使用了前面提到的 JSS，適應性強且未來可期。
我現在正在一個新專案中使用它，目前為止，我很喜歡他。
Webpack
你宣告的每一個匯入都是針對每個頁面自動打包並提供。也就是說，頁面永遠不會載入不必要的程式碼。
你甚至可以分析打包好的檔案，藉助延遲載入模組進一步優化載入時間。
路由簡單而直觀，你可以選擇預取頁面來獲得最好的效能。你不需要為了讓路由器發揮作用而安裝任何依賴。
開始的時候，習慣使用 React Router 或其他類似路由器的人們可能會遇到一點困難，但它確實很簡單，只是方法不同。但在我看來，這種方法非常容易掌握。
你不需要指定路由和所有與路由相關的內容，而只要將一個頁面新增到 pages 目錄，從而使頁面 URL 可用。這非常簡單，但是如果你想要更復雜的東西呢？
安裝一個伺服器，最好是 Express，在伺服器配置中指定自定義路由。通過這種方式，你可以得到你想要的各種路由和簡潔的 URL。
只要不需要在執行時生成動態頁面，Next.js 就允許你將應用匯出成靜態 HTML。相當不錯，不是嗎？
應用程式部署非常令人愉快；這不僅是因為你最終會達到目標，還因為你的實現方式。你可以使用一個命令構建整個應用程式，並使用另一個命令將其部署到全球的主機。
如果你的主機上有 ZEIT now，你就多了一個選項。如果你計劃使用 Next.js，我建議你使用這個部署工具，因為它會使部署變得極其簡單。
總 結
有許多細節我沒有提及。我只是大致介紹了在我看來最重要的內容。
在我發現 Next.js 之前，我從來沒有像現在這樣喜歡 React。把 React 和 Next 一起使用，看起來很自然。一開始就應該是這樣的。
對我來說，這是構建使用者介面唯一正確的方法，它讓我愛上了 React。
檢視英文原文：
https://medium.freecodecamp.org/use-react-with-next-js-framework-and-how-it-made-my-life-easier-4280b643451
活動推薦
一線架構師如何提升程式碼效率、改進系統性能？Linkedln 如何快速構建高效分散式應用？深度學習系統背後有何關鍵技術？京東如何基於 OpenResty 設計高效能閘道器？
12 月 9-10 日，ArchSummit 全球架構師峰 - 深度培訓，來自 Linkedln 和京東的架構踩坑經驗，揭祕架構師升級指南！
優惠倒計時，1 秒 掃碼 ，get 架構師必備技能圖譜（電子版），並獲取深度培訓優惠入場券。歡迎來撩小姐姐 Vicky，聯絡電話：13120028531 微信：chenxi988625
