NextJs 和 Create React App 有什么区别

Question

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

在谷歌上浏览了一些文章后，我发现主要的区别是

NextJs 提供服务器端渲染（SSR），而 Create React App 提供客户端渲染（CSR），SSR 提高应用程序加载的性能。

但是从开发的角度来看其他参数呢

使用 NextJS 或 CRA 开发的 Web App 的可维护性和可扩展性？

打字稿和 React Hooks/Redux 支持?

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

Answer 1

我用过 NextJs 和 CRA。这两个框架都可用于快速入门并提供良好的开发人员体验。然而，这两个都有用例，其中任何一个都更好。我将尝试根据其中一些因素来比较它们。随意提出带有附加点或评论的编辑建议

服务器端渲染

税务局	Next.js
CRA 不支持开箱即用的 SSR。 但是，您仍然可以对其进行配置。 使用您喜欢的服务器和配置设置 SSR 需要更多的努力。开发团队没有计划在不久的将来支持这一点。他们为此用例建议了其他工具。	NextJs 有不同的 SSR 类型。它支持开箱即用的 SSR。 * 静态生成：在构建时获取数据。这最适用于博客或静态网站等用例 * 服务器端渲染：为每个请求获取数据并渲染。当您需要为不同的用户提供不同的视图时，您必须这样做。

可配置性

我认为这是这些工具非常不同的地方，您的决定可能取决于这个因素

税务局	Next.js
Create React App 不会给你太多的配置空间。 除非 您偏离正常的 CRA 方式（eject、rescripts、rewired、craco），否则无法更改 webpack config 等配置。 基本上，您必须使用配置的内容， react-scripts其中是 CRA 的核心。	几乎所有东西都是可配置的。 如果检查例子NextJs模板，你可以看到文件，如 babelrc，jest.config，eslintrc等 你可以配置。

可维护性

税务局	Next.js
CRA 非常固执己见。 如果您不断更新 CRA 的版本，那么维护起来并不难。	NextJs 也得到了很好的维护。他们会定期发布更新。

打字稿

税务局	Next.js
支持开箱即用。您可以使用打字稿初始化 CRA 应用程序 npx create-react-app my-app --template typescript	支持开箱即用的打字稿。 从打字稿的配置开始touch tsconfig.json

挂钩支持

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

Redux 支持

Redux 是一个可以与这两种工具一起使用的库。

Answer 2

Create React App只是一个 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 编码。组件、JSX、TypeScript 支持、React hooks和React 的所有其他核心方面都将得到支持。因此，您可以期待类似程度的可维护性。另一方面，可扩展性取决于您的选择：如果您选择 Next.js，您将在服务器基础架构上托管应用程序，该基础架构应根据您的受众调整大小，而使用 CRA 创建的 React 包只需要静态托管在某处。

Answer 3

总长DR

最大的区别是两个项目的目的。NextJS：JAM Stack或静态站点生成器 Create React App：是官方支持的创建单页 React 应用程序的方法。

解释：

对于许多开源项目来说，这个难题都是存在的。看起来是其他的选择，但它们有关键的区别。对于本例中的示例，尽管两个项目都使用 ReactJS 作为前端并生成 Web 应用程序。他们解决的问题非常不同。js 中有一些重叠的功能主题/模板。但开发和未来的工作将是加强项目，以便它有助​​于以更好的方式解决问题陈述。

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

建议。

从你的问题来看，你似乎正在寻找这些项目来开发 React Native 应用程序。所以我建议使用 Create React App。

你的比较应该主要是这个项目是否符合我正在解决的问题。然后比较。可维护性、可扩展性、Typescript 和 React Hooks/Redux 支持。

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

Answer 4

React 只是一个 JavaScript 库，而 Nextjs 是一个 React 框架。SSR 是 Nextjs 的好处之一，但还有很多其他好处。Nextjs 可以做 react 能做的所有事情，而且最重要的是，它具有 React 本身没有的功能。在此处查看 nextjs 的文档：https ://nextjs.org/docs/getting-started