Next.js和Create React App有什么区别?

x6h2sr28  于 2023-08-04  发布在  React
关注(0)|答案(6)|浏览(313)

我试图找出Next.jsCreate React App(CRA)之间的区别。我知道这两种工具都是为了让我们在使用React开发前端应用程序时更加轻松。
在浏览了Google上的一些文章后,我发现主要的区别在于
Next.js提供服务器端呈现(SSR),而Create React App提供客户端呈现(CSR),SSR提高了应用程序加载的性能。
但是,从发展的Angular 来看,其他参数如何,如以下参数?

  • 使用Next.js或CRA开发的Web应用程序的可维护性和可伸缩性
  • TypeScript和React挂接/Redux支持

这是一个错误的比较吗?

camsedfj

camsedfj1#

NextJ和CRA我都用过。这两个框架都可以用于快速入门并提供良好的开发人员体验。然而,这两种方法都有使用案例,其中任何一种方法都能更好地发挥作用。我将根据其中的一些因素来比较它们。您可以随时提出包含其他要点或注解的编辑建议

服务器端呈现

| Next.js | Next.js |
| --| ------------ |
| 但是,您仍然可以对其进行配置。使用您首选的服务器和配置来设置SSR只会花费更多的精力。开发团队近期没有计划支持此功能。他们建议针对此使用情形使用其他工具。下一个Js有different types for SSR。|它支持SSR开箱即用。* 静态生成:在生成时获取数据。这最适合博客或静态网站等用例 * 服务器端渲染:为每个请求获取数据和呈现。当您需要为不同的用户提供不同的视图时,您必须这样做。|

可配置性

我认为这是这些工具非常不同的地方,您的决定取决于此因素
| Next.js | Next.js |
| --| ------------ |
| 无法更改诸如webpack config之类的配置,除非您偏离了正常CRA方式(弹出、重新编写、重新连线、崩溃)。基本上,您必须使用react-scripts是CRA的核心。“几乎所有的东西都是configurable。|如果您查看示例NextJs templates,您可以看到如下文件babelrcjest.configeslintrc等您可以配置。|

可维护性

| Next.js | Next.js |
| --| ------------ |
| 如果您不断更新CRA的版本,维护起来并不难。NextJs也得到了很好的维护。|他们会定期发布更新。|

typescript

| Next.js | Next.js |
| --| ------------ |
| 您可以使用带有以下内容的打字脚本初始化CRA应用程序npx create-react-app my-app --template typescriptSupports typescript开箱即用。|从配置touch tsconfig.json的 typescript 开始 Start with configurations for typescript with touch tsconfig.json |

挂钩支架

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

Redux支持

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

ao218c7q

ao218c7q2#

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钩子 *,以及React的所有其他核心方面都将以任何方式支持。因此,您可以期待类似程度的可维护性。另一方面,可扩展性取决于您的选择:如果你选择Next.js,你将把应用托管在一个服务器基础设施上,这个基础设施应该根据你的受众来调整大小,而用CRA创建的React包只需要静态托管在某个地方。

pkln4tw6

pkln4tw63#

最低还款额

两个项目最大区别在于其目NextJS:JAM StackStatic Site Generator创建React应用程序:是一种官方支持的创建单页React应用程序的方法。

说明:

这个难题对于许多开源项目来说都是真实的。看起来是其他的替代品,但它们有关键的区别。例如,在这种情况下,虽然两个项目都使用ReactJS作为前端,并产生webapps。它们所解决问题是非常不同的。在js中存在一些重叠的功能主题/模板。但是开发和未来工作将是增强项目,以便它能以更好的方式帮助解决问题陈述。
例如,如果开发了任何新的Markdown功能,NextJS将尝试包括在内。在CreateReactApps中就不是这样了。

建议。

从您的问题看,您似乎正在寻找开发React原生应用程序的项目。所以我建议使用Create React应用程序。
你的比较应该主要是这个项目是否与我正在解决的问题相一致。然后进行比较。可维护性、可扩展性、Typescript和React Hooks/Redux支持。
如果需要更多信息,请进行评论。

mfuanj7w

mfuanj7w4#

React只是一个JavaScript库,而Next.js是一个React框架。SSR是Next.js的优势之一。但是还有很多其他的好处。
Next.js可以做React所做的一切,最重要的是,它具有React单独没有的功能。请在 Getting Started 查看Next.js的文档。

vsmadaxz

vsmadaxz5#

ReactJs是一个库,NextJs是使用react组件的框架。

gpfsuwkq

gpfsuwkq6#

Next.js和Create React App(CRA)都是构建React应用程序的工具,但它们有不同的目标和功能集。以下是一些关键差异:

**服务器端渲染:**Next.js是一个用于构建服务器端渲染(SSR)React应用程序的框架,这意味着初始页面在服务器上渲染,然后发送到客户端。这可以提高性能,特别是对于大型或复杂的应用程序。另一方面,CRA默认情况下仅支持客户端渲染(CSR)。
**路由:**Next.js内置了客户端和服务器端路由支持,可以轻松创建动态路由页面。CRA要求您使用第三方路由库,例如React Router。
**API routes:**Next.js内置API routes功能,可以轻松创建无服务器API端点。CRA没有此功能,但您可以使用第三方库或通过设置单独的服务器来创建API端点。
**配置:**CRA提供了开箱即用的最小配置,易于设置和使用。Next.js有更多的配置选项,可以定制以适应更复杂的用例。
**插件:**CRA有一个插件系统,允许您向应用程序添加其他功能。Next.js没有插件系统,但它确实有大量的内置功能,涵盖了许多常见的用例。

总的来说,如果你需要服务器端渲染、动态路由或内置API端点,Next.js可能是你项目的更好选择。如果你只是需要一种简单的方法来设置一个带有客户端渲染的React应用程序,CRA是一个不错的选择。

相关问题