为何我会选择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，里面都是学习前端的，但愿能帮助你更了解前端，学习前端

点击：加入