NextJS 和 create- react -app 有什么区别？

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. 服务端渲染（SSR）与客户端渲染：

   • Next.js 支持服务端渲染，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     • 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   • Create React App 生成的是完全的客户端JavaScript应用，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. 静态站点生成（SSG）：

   • Next.js 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     • 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. 路由：

   • Next.js 提供了一个基于文件系统的路由系统，你可以通过在pages文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     • 例如，增加一个名为about.js的页面，Next.js会自动将其关联到/about这个URL路径。
   • Create React App 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. 构建和启动速度：

   • Next.js 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   • Create React App 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. 设置和配置：

   • Next.js 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     • 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   • Create React App 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. API路由：

   • Next.js 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     • 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在pages/api目录中直接添加API路由，而无需另外创建一个后端服务。

7. 社区和生态：

   • 虽然这两个工具各自拥有庞大、活跃的社区，但是由于Next.js提供了更多的内建功能，它的生态系统可能相对于Create React App来说更为复杂且多样化。例如，Next.js社区中包含了更多关于服务端渲染和静态站点生成的最佳实践讨论，同时也有更多针对性能优化、SEO以及API路由管理的资源。

8. 部署和托管：

   • Next.js 设计时就考虑了与Vercel（由同一开发团队维护）的无缝集成，使得部署Next.js应用变得非常简易。尽管如此，Next.js应用也可以部署在其他支持Node.js的平台上。
   • Create React App 生成的静态文件可以轻松地部署在任何可以托管静态文件的服务上，如GitHub Pages、Netlify或Vercel等。

9. 开箱即用的功能：

   • Next.js 提供了许多开箱即用的功能，如图片优化（next/image）、国际化（i18n）路由、环境变量的支持等。
   • Create React App 更专注于提供一个干净、无预设的React环境，这意味着需要额外的工作来集成上述功能。

10. 灵活性与控制：

    • Next.js 在提高开发效率的同时，牺牲了一定程度的灵活性。如果默认的配置不满足需求，可能需要更多时间来理解和修改内部设置。
    • Create React App 则提供了一个较为灵活的起点，尤其是在执行eject之后，开发者可以对构建等细节有完全的控制。

总结来说，Next.js和Create React App各自适合不同的场景和需求。Next.js更倾向于那些需要服务端渲染、静态站点生成和API路由等全栈特性的复杂应用，而Create React App则可能更适合那些需要快速启动并希望保持较高灵活性的简单客户端应用。选择哪个框架/工具，需要根据项目的具体需求、开发团队的技术栈以及对SEO和性能的考量来决定。

I've used both NextJs and CRA. Both these frameworks can be used to get started quickly and provide a good developer experience. However, both of these have use cases where either of them shines better. I'll try to compare them based on some of these factors. Feel free to suggest edits with additional points or comments

Server Side Rendering

CRA

Next.js

CRA doesn't support SSR out of the box.
However, you can still configure it.
It just takes more effort to setup SSR with your preferred server and configuration. The development team doesn't have plans to support this in the near future. They suggest other tools for this use case.

NextJs has different types for SSR. It supports SSR out of the box.
* Static generation: fetch data at build time. This works best for use cases like blogs or static websites
* Server side rendering: fetch data and render for each requests. You have to do this when you need to serve different view for different users.

---

Configurability

I think this is point where these tools are very different and your decision can depend on this factor

CRA

Next.js

Create React App doesn't leave you a lot of room to configure it.
Configurations like webpack config cannot be changed unless
you stray away from normal CRA way (eject, rescripts, rewired, craco).
Basically, you have to use what's configured in
react-scripts which is the core of CRA.

Almost everything is configurable.
If you check the example NextJs templates, you can see files like
babelrc, jest.config, eslintrc etc
that you can configure.

---

Maintainability

CRA

Next.js

CRA is very opinionated.
If you keep updated with the releases of CRA, it's not hard to maintain.

NextJs is also well maintained. They release regular updates.

---

Typescript

CRA

Next.js

Supports out of the box. You can initialize CRA app with typescript with
npx create-react-app my-app --template typescript

Supports typescript out of the box.
Start with configurations for typescript with touch tsconfig.json

---

Hooks support

Latest version of both CRA and NextJs installs a version of React that supports hooks. You can also upgrade to the latest version easily

---

Redux support

Redux is a library that you can use with both these tools.

Create React App is just a React project creation engine to help you setup your React project quickly. After running the CRA script npx create-react-app <appname> you will get a nice and clean single-page application that you can run. Under the hood you also get things like babel, eslint, jest, webpack already setup so it's a really convenient way to start doing React development. And in case you'd need more control over the configuration of those tools, you can still use npm run eject.

Next.js on the other hand is a framework based on React to build Node.js server-side apps. This means you will use the same component-oriented logic to build pages and leverage the Next.js routing engine for page to page navigation. Server-side rendering will allow loading time to be more spread over time, so perceived performance will be probably better. Redux can be used as well but there will be some additional steps to make it work properly (see https://github.com/kirill-konshin/next-redux-wrapper)

Whatever you choose, in the end, it will be React coding. Components, JSX, TypeScript support, React hooks, and all other core aspects of React will be supported either way. Therefore, you can expect similar degree of maintainability. On the other hand, scalability depends on your choice: if you choose Next.js you will host the app on a server infrastructure which should be sized according to your audience whereas React bundle created with CRA just need to be statically hosted somewhere.

TLDR

biggest difference is purpose of both projects. NextJS : JAM Stack or Static Site Generator Create React App : is an officially supported way to create single-page React applications.

Explanation:

This conundrum is true for many opensource projects. Seem alternative of other but they have key differences. For Example in this case Although both projects use ReactJS as front end and produce webapps. the problem they solve are very distinct. there are some overlapping features themes/templates in js. but development and future work will be to enhance project such that it helps solve there problem statement in better way.

i.e. NextJS will try to include if there are any new Markdown features developed. which won't be the case in CreateReactApps.

Suggestion.

from your question it seems you are looking these projects for developing React Native Apps. So I will suggest go with Create React App.

your comparison should primarily be whether this project align with Problem I am solving. then compare. Maintainability, Scalability, Typescript and React Hooks/Redux support.

In case needed more info do comment.

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. 服务端渲染（SSR）与客户端渲染：

   • Next.js 支持服务端渲染，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     • 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   • Create React App 生成的是完全的客户端JavaScript应用，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. 静态站点生成（SSG）：

   • Next.js 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     • 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. 路由：

   • Next.js 提供了一个基于文件系统的路由系统，你可以通过在pages文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     • 例如，增加一个名为about.js的页面，Next.js会自动将其关联到/about这个URL路径。
   • Create React App 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. 构建和启动速度：

   • Next.js 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   • Create React App 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. 设置和配置：

   • Next.js 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     • 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   • Create React App 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. API路由：

   • Next.js 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     • 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在pages/api目录中直接添加API路由，而无需另外创建一个后端服务。

7. 社区和生态：

   • 虽然这两个

Next.js 和 Create React App（CRA）是构建React单页应用的两种流行框架/工具，它们在设计哲学和功能特点上有一些关键的区别：

1. 服务端渲染（SSR）与客户端渲染：

   • Next.js 支持服务端渲染，这意味着React组件将在服务器上渲染成HTML，然后发送到客户端。这对于搜索引擎优化（SEO）和性能优化非常有用，因为用户可以更快地看到页面的第一次渲染，并且搜索引擎可以抓取内容。
     • 例如，如果我需要构建一个博客网站，服务端渲染可以让博客文章在用户访问时快速显示出来，同时也更利于搜索引擎索引。
   • Create React App 生成的是完全的客户端JavaScript应用，这意味着所有的渲染工作都在浏览器中完成。这可能会导致初始加载时间较长，尤其是在JavaScript较重的应用中。

2. 静态站点生成（SSG）：

   • Next.js 还提供了静态站点生成的选项，允许你预先生成页面，在构建时将数据整合进HTML。这样做的好处是能够生成可以直接由CDN服务的、快速且成本低廉的页面。
     • 例如，如果我负责一个营销网站，其内容不经常改变，我可能会选择Next.js的静态站点生成功能，以便提供快速的加载时间并减少服务器成本。

3. 路由：

   • Next.js 提供了一个基于文件系统的路由系统，你可以通过在pages文件夹中添加JS/TS文件来自动创建路由。这简化了路由的配置。
     • 例如，增加一个名为about.js的页面，Next.js会自动将其关联到/about这个URL路径。
   • Create React App 没有内建的路由系统，通常需要使用像React Router之类的第三方库来处理路由。

4. 构建和启动速度：

   • Next.js 由于其功能更为丰富，可能在构建和启动时比CRA稍微慢一些，特别是在大型项目中。
   • Create React App 通常启动得更快，这对于小型项目和原型设计可能更有优势。

5. 设置和配置：

   • Next.js 预设了很多配置，比如Webpack和Babel的配置，这为开发者提供了便利，但同时也可能对想要更细粒度控制的开发者造成限制。
     • 例如，我在工作中使用Next.js进行过一个项目，该项目受益于Next.js的预设配置，我们不需要花太多时间来配置Webpack。
   • Create React App 提供一个相对简单的起步体验，但如果你需要自定义配置（如Webpack），你可能需要'eject'，这会暴露所有的配置文件，从而允许更深层次的配置。

6. API路由：

   • Next.js 提供了API路由的功能，允许你在同一个项目中创建API端点，这对于构建全栈应用非常方便。
     • 举例来说，如果我需要构建一个应用并且希望前端和后端紧密集成，我可以在pages/api目录中直接添加API路由，而无需另外创建一个后端服务。

7. 社区和生态：

   • 虽然这两个 工具各自拥有庞大、活跃的社区，但是由于Next.js提供了更多的内建功能，它的生态系统可能相对于Create React App来说更为复杂且多样化。例如，Next.js社区中包含了更多关于服务端渲染和静态站点生成的最佳实践讨论，同时也有更多针对性能优化、SEO以及API路由管理的资源。

8. 部署和托管：

   • Next.js 设计时就考虑了与Vercel（由同一开发团队维护）的无缝集成，使得部署Next.js应用变得非常简易。尽管如此，Next.js应用也可以部署在其他支持Node.js的平台上。
   • Create React App 生成的静态文件可以轻松地部署在任何可以托管静态文件的服务上，如GitHub Pages、Netlify或Vercel等。

9. 开箱即用的功能：

   • Next.js 提供了许多开箱即用的功能，如图片优化（next/image）、国际化（i18n）路由、环境变量的支持等。
   • Create React App 更专注于提供一个干净、无预设的React环境，这意味着需要额外的工作来集成上述功能。

10. 灵活性与控制：

    • Next.js 在提高开发效率的同时，牺牲了一定程度的灵活性。如果默认的配置不满足需求，可能需要更多时间来理解和修改内部设置。
    • Create React App 则提供了一个较为灵活的起点，尤其是在执行eject之后，开发者可以对构建等细节有完全的控制。

总结来说，Next.js和Create React App各自适合不同的场景和需求。Next.js更倾向于那些需要服务端渲染、静态站点生成和API路由等全栈特性的复杂应用，而Create React App则可能更适合那些需要快速启动并希望保持较高灵活性的简单客户端应用。选择哪个框架/工具，需要根据项目的具体需求、开发团队的技术栈以及对SEO和性能的考量来决定。