NextJs和Create React App

Question

我正在尝试找出NextJs和Create React App之间的区别。我知道在使用ReactJs开发前端应用程序时，两者都可以使我们的生活更轻松。

在Google上浏览了一些文章之后，我发现主要区别是

NextJs在创建React App时提供服务器端渲染（SSR） 提供客户端渲染（CSR），SSR可以提高 正在加载应用程序。

但是从开发角度来看，其他参数如何呢？例如可维护性，可伸缩性，Typescript和React Hooks / Redux支持等？

或者如果我做错了比较，您甚至可以指导我？

Answer 1

我同时使用了NextJs和CRA。这两个框架均可用于快速入门并提供良好的开发人员体验。但是，这两种方法都有用例，它们中的任何一种都能更好地发挥作用。我将尝试基于这些因素中的一些进行比较。随时提出带有其他要点或评论的修改建议

服务器端渲染

CRA

CRA不支持开箱即用的SSR。
但是，您仍然可以配置它。
使用
设置SSR只需花费更多的精力 首选服务器和配置。
开发团队没有计划在
中对此提供支持 不久的将来。他们suggest other tools使用此用例。

Next.js

NextJs有different types for SSR。
它支持开箱即用的SSR

• 静态生成：在构建时获取数据。
  这最适合博客或静态网站之类的用例
• 服务器端渲染：获取数据并为每个请求渲染。
  当需要为不同的用户提供不同的视图
  时，必须执行此操作。

---

可配置性

我认为这是这些工具截然不同的地方，您的决定可以取决于这个因素

CRA

创建React App不会给您太多配置空间。
除非您偏离正常的CRA方式（弹出，脚本，重新布线），否则无法更改webpack config之类的配置。
基本上，您必须使用CBR的核心
react-scripts中配置的内容。

NextJs

几乎所有内容都是configurable。
如果查看示例NextJs templates，则可以看到可以配置的文件，如
babelrc，jest.config，eslintrc等
。

---

可维护性

CRA

CRA非常自以为是。
如果您不断更新 CRA版本的发布，这并不难维护。

NextJs

NextJs也维护得很好。他们发布定期更新。

---

打字稿

CRA

开箱即用的支持。

您可以使用打字稿来初始化CRA应用

npx create-react-app my-app --template typescript

NextJs

Supports typescript开箱即用。
首先使用打字稿的配置

touch tsconfig.json

---

挂钩支持

CRA和NextJs的最新版本会安装支持钩子的React版本。您还可以轻松升级到最新版本

---

Redux支持

Redux是可以同时使用这两个工具的库。

Answer 2

创建React应用只是一个React项目创建引擎，可帮助您快速设置React项目。运行CRA脚本npx create-react-app <appname>之后，您将获得一个可以运行的漂亮，整洁的单页应用程序。在幕后，您还可以设置babel，eslint，jest，webpack之类的东西，因此这是开始进行React开发的一种非常方便的方法。而且，如果您需要对这些工具的配置进行更多控制，则仍然可以使用npm run eject。

另一方面，

Next.js 是一个基于React的框架，用于构建Node.js服务器端应用程序。这意味着您将使用相同的面向组件的逻辑来构建页面，并利用Next.js路由引擎进行页面间导航。服务器端渲染将使加载时间随着时间的推移而更加分散，因此感知的性能可能会更好。也可以使用Redux，但还有一些其他步骤可以使其正常工作（请参见https://github.com/kirill-konshin/next-redux-wrapper）

无论您选择什么，最终都是React编码。 Components ， JSX ， TypeScript支持， React hooks 以及React的所有其他核心方面都将受到支持。因此，您可以期望达到类似程度的可维护性。另一方面，可伸缩性取决于您的选择：如果选择Next.js，则将在服务器基础结构上托管应用程序，该服务器基础结构应根据您的受众群体来确定大小，而使用CRA创建的React捆绑包只需要静态地托管在某个位置即可。

Answer 3

React只是一个JavaScript库，另一方面，Nextjs是一个React框架。 SSR是Nextjs的好处之一，但是还有许多其他好处。 Nextjs可以做React所做的一切，最重要的是，它具有仅React没有的功能。在此处签出nextjs的文档：https://nextjs.org/docs/getting-started

Answer 4

TLDR

最大的差异是两个项目的目的。 NextJS：JAM Stack或Static Site Generator Create React App：是创建单页React应用程序的官方支持方式。

说明：

这个难题对于许多开源项目都是正确的。似乎是其他的替代品，但它们有关键的区别。以这种情况下的示例为例，尽管两个项目都使用ReactJS作为前端并生成webapp。他们解决的问题非常不同。 js中有一些重叠的功能主题/模板。 但是开发和未来的工作将是增强项目，以便更好地解决问题。

即NextJS将尝试包括是否开发了任何新的Markdown功能。在CreateReactApps中不是这种情况。

建议。

从您的问题来看，您似乎正在寻找这些项目来开发React Native Apps。因此，我建议您使用Create React App。

您的比较应该主要是该项目是否符合我要解决的问题。 然后比较。 可维护性，可伸缩性，打字稿和React Hooks / Redux支持。

如果需要更多信息，请发表评论。