Next.js和Create React App之间有什么区别？

Question

我正在试图弄清Next.js和Create React App（CRA）之间的区别。我知道两者都是为了在使用React开发前端应用程序时使我们的生活更轻松。

在Google上探索了一些文章后，我发现主要的区别在于

Next.js提供了服务器端渲染（SSR），而Create React App提供了客户端渲染（CSR），而SSR则改善了应用程序的加载性能。

但是从开发角度来看，其他参数如下：

• 使用Next.js或CRA开发的Web应用程序的可维护性和可扩展性

• TypeScript和React hooks/Redux的支持

这是一个错误的比较吗？

- DevLoverUmar

---

不太准确但有用的答案：NextJS非常适合基于页面的导航，例如落地页和博客。 CRA非常适合单页应用程序，例如仪表板和桌面风格的Web应用程序。对于Medium克隆，我更喜欢NextJS。对于Slack克隆，我选择CRA。 - user

在2022年，使用CRA的唯一原因是为了维护现有的应用程序。不要在任何新项目中使用CRA。NextJS FTW！ - Jonathan Dsouza

Next.js适用于95%的开发人员，它可以带来许多好处。但如果你是那个想要定制行为和最佳优化的顶尖5%，就不要使用nest.js。 - yangli-io

Answer 1

我既使用过Next.js也使用过CRA。这两个框架都可以快速启动并提供良好的开发体验。然而，它们各自有其擅长的应用场景。以下是我基于一些因素来比较它们。欢迎您提出额外的观点或评论。

服务端渲染

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

---

可配置性

我认为这是这些工具非常不同的一个点，你的决定可能取决于这个因素。

CRA	Next.js
Create React App 没有留给你很多配置空间。 除非你远离普通 CRA 的方式（eject、rescripts、rewired、craco），否则不能更改像 webpack 配置这样的配置。 基本上，你必须使用在 react-scripts 中配置的东西，这是 CRA 的核心。	几乎可以对所有内容进行配置。 如果你查看NextJs 模板，你会看到像 babelrc、jest.config、eslintrc 这样的文件，你可以对它们进行配置。

---

可维护性

CRA	Next.js
CRA 非常有见解。 如果你保持与 CRA 发行版的更新同步，它并不难以维护。	NextJs 也得到了很好的维护。他们定期发布更新。

---

TypeScript

CRA	Next.js
支持开箱即用。您可以使用以下命令初始化一个带有Typescript的CRA应用程序： npx create-react-app my-app --template typescript	支持Typescript开箱即用。可使用touch tsconfig.json配置typescript。

---

Hooks支持

最新版本的CRA和Next.js都安装了支持hooks的React版本。您也可以轻松升级至最新版本。

---

Redux支持

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

- sudo bangbang

---

请问您能否再加入一些关于可扩展性的内容吗？ - DevLoverUmar

请问您能否定义可扩展性？只是为了确保我理解您所说的内容。我看到另一个答案有关于它的解释。也许您可以补充一下那个答案没有涵盖的可扩展性方面。 - sudo bangbang

create-react-app是一个框架。它的用途与其他流行的前端框架不同。主要用途是原型设计和学习React。CRA缺少其他框架提供的功能，但仍然是一个框架。 - sudo bangbang

你所写的内容并不完全正确。我不是这两者的粉丝，但 CRA 提供了一种很好的扩展配置的方式，你可以添加 babel、typescript 或 webpack 配置文件而无需强制退出。因此，“Create React App 不留给你太多配置的空间。”这句话并不完全正确。 - Bojan Golubovic

NextJS为您提供开箱即用的路由功能。它基于文件夹结构自动生成路由。 - Janac Meena

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 bundle只需要在某个静态托管位置即可。

- Sebastien Mornas

Answer 3

简介

两个项目最大的差异在于它们的目的不同。 NextJS：JAM堆栈 或 静态网站生成器; Create React App：是创建单页React应用程序的官方支持方式。

解释

这种困境对许多开源项目都是真实存在的。它们看起来像其他的替代品，但它们有着关键的不同之处。例如，在这种情况下，虽然两个项目都使用ReactJS作为前端，并产生Web应用程序，但它们解决的问题却非常不同。

有一些重叠的特性，比如js中的主题/模板，但是开发和未来的工作都将集中在增强项目，以便更好地解决他们所面临的问题陈述。

例如，NextJS 将尝试包括任何新的Markdown功能开发。而这在 CreateReactApps 中则不是这样。

建议

从你的问题中看来，你正在寻找这些项目来开发React Native应用程序。因此，我建议选择Create React App。

您的比较应主要与我正在解决的问题是否相符。然后进行比较。 可维护性、可扩展性、TypeScript和React Hooks/Redux支持。

如有需要进一步了解，请留言评论。

- Devidas

---

谢谢，我的主要关注点是单页应用程序。你的回答让这一点变得清晰明了！ - DevLoverUmar

Answer 4

React只是一个JavaScript库，而另一方面，Next.js是一个React框架。SSR是Next.js的其中一个优点，但还有许多其他好处。

Next.js可以做到React所能做的一切，并且在此基础上，它还具有React独有的功能。请查看Next.js的文档，了解更多信息：入门指南。

- Ebenezer Mathebula

---

很遗憾，这个回答没有回到问题的重点，即比较CRA平台和Next.js平台。 - jfunk

这个答案没有详细说明 Next.js 相对于 CRA 的“好处”，而且也没有将 CRA 与 Next.js 框架进行比较。 - Emile ASTIH

Answer 5

ReactJs 是一个库，而 NextJs 则是一个使用 React 组件的框架。

- fardeen awais

Answer 6

Next.js和Create React App（CRA）都是用于构建React应用程序的工具，但它们具有不同的目标和功能集。以下是一些关键区别：

服务器端渲染： Next.js是一个用于构建服务器端渲染（SSR）React应用程序的框架，这意味着初始页面在服务器上进行渲染，然后发送到客户端。这可以提高性能，特别是对于大型或复杂的应用程序。另一方面，CRA默认仅支持客户端渲染（CSR）。

路由： Next.js内置了对客户端和服务器端路由的支持，这使得创建具有动态路由的页面变得容易。CRA需要您使用第三方路由库，例如React Router。

API路由： Next.js具有内置的API路由功能，这使得创建无服务器API端点变得容易。CRA没有此功能，但您可以使用第三方库或设置单独的服务器来创建API端点。

配置： CRA提供了最小化的配置，并且旨在易于设置和使用。Next.js具有更多的配置选项，并且可以根据需要进行自定义以适应更复杂的用例。

插件：CRA具有插件系统，允许您向应用程序添加其他功能。Next.js没有插件系统，但它具有大量内置功能，涵盖了许多常见用例。

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

- sanjiv sutar

---

这个回答看起来像是由人工智能生成的。 - DavidW