爲何我會選擇React+Next.js，而不是Vue或Angular？

本文的目的不是要對 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

我一直將 Vue 視爲入門級應用和網站的最佳選擇。我之前甚至還寫過幾篇文章，可是，React 與 Next.js 的搭配是最省力的。有人可能會說這是孩子的遊戲。

公平地講，React 入門並無那麼難。它的學習曲線稍微有點陡峭，但你最終會獲得回報。

考慮到這一點，React 就佔了上風。它更成熟、更可靠，有更大的社區和 Facebook 的支持。

Angular

在個人印象中，Angular 一直是一個重要而成熟的框架，可是，我不會選擇它。由於我不喜歡它。

雖然 TypeScript 也是一個選項，但你彷佛是被迫在使用它。整個框架看上去過於複雜，並且沒有明確的理由。最糟糕的是，我彷佛找不到任何值得我經歷這些麻煩去使用它的地方。

Next.js 的特性

下面是 learnnextjs 上列出的一些很棒的 Next.js 特性：

默認服務器端渲染；

爲加速頁面加載，自動進行代碼分割；

簡化客戶端路由（基於頁面）；

基於 Webpack 的開發環境，支持熱模塊更換
(https://webpack.js.org/concep...（HMR）；

能夠經過 Express 或任何其餘 Node.js HTTP 服務器實現；

能夠經過你本身的 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。

這裏推薦一下個人學習交流q-u-n-：731771211，裏面都是學習前端的，但願能幫助你更瞭解前端，學習前端

點擊：加入