Next.js 与 React？ 这是一种伙伴关系，而不是竞争

现代 Web 开发人员并不缺少 JavaScript 库和框架。 最普遍的库之一是 React，它是 Facebook（现为 Meta）创建的，用于帮助构建功能丰富的应用程序。 React 应用程序传统上运行在 Web 浏览器中，但 Next.js 框架通过 JavaScript 运行时环境 Node.js 将 React 功能扩展到服务器端。

在本文中，我们将研究 Next.js 和 React，以便您可以决定它们是否适合您的下一个项目。

Next.js 和 React：更上一层楼的 JavaScript

SlashData 2022 年的一项调查发现，全球有超过 1700 万 JavaScript 程序员，其中包括 Python 和 Java 等流行语言。 JavaScript 可用于客户端和服务器端，这种多功能性意味着开发人员可以使用一种编程语言构建成熟的应用程序。

React 等 JavaScript 库和 Next.js 等框架的引入进一步促进了这种发展。 这些库和框架提供了简化前端和后端集成的功能。 此外，开发人员可以使用 npm（Node.js 包管理器）等包管理器来扩展 JavaScript 功能，以安装 JavaScript 库和工具。 这些资源提供了复杂的功能，可以减少您必须自己编写的代码量。

JavaScript 的可扩展性意味着对其最常用工具的全面了解是您作为 Web 开发人员取得成功的关键。

什么是 Next.js？

Next.js 最初由 Vercel 于 2016 年发布，是一个开源 React 框架，它提供构建块来创建高性能 Web 应用程序。 此后，大公司都采用了它，包括 Twitch、TikTok 和 Uber 等。

Next.js 为构建快速、SEO 友好的应用程序提供了最佳的开发人员体验之一。 以下是 Next.js 的一些特性，这些特性使其成为一个出色的生产框架：

• 混合渲染能力
• 自动代码拆分
• 图片优化
• 内置支持 CSS 预处理器和 CSS-in-JS 库
• 内置路由

这些功能帮助 Next.js 开发人员在配置和工具上节省了大量时间。 您可以直接跳转到构建您的应用程序，这可能支持如下项目：

• 电子商务商店
• 博客
• 仪表板
• 单页应用
• 交互用户界面
• 静态网站

什么是反应？

React 是一个用于构建动态用户界面的 JavaScript 库。 除了创建 Web 界面之外，您还可以使用 React Native 构建移动应用程序。

使用 React 的一些好处包括：

• 改进的性能： React 不是更新 DOM 中的每个组件，而是使用虚拟 DOM 仅更新更改的组件。
• 高度基于组件：创建组件后，您可以重复使用它。
• 轻松调试： React 应用程序使用单向数据流——仅从父组件到子组件。

Next.js 与 React

尽管开发人员经常出于相同目的使用 Next.js 和 React，但两者之间存在一些根本差异。

使用方便

从 Next.js 和 React 入手很容易。 每个都需要使用npx在您的终端中运行单个命令，它是 Node.js 的 npm 的一部分。

对于 Next.js，最简单的命令是：

 npx create-next-app

如果create-next-app没有附加参数，安装将以交互模式进行。 您将被要求提供项目名称（将用于项目目录），以及您是否要包括对 TypeScript 和代码 linter ESLint 的支持。

它看起来像这样：

初始化 React 实例时，最简单的命令包括项目目录的名称：

 npx create-react-app new-app

这会生成一个文件夹，其中包含所有必要的初始配置和依赖项：

虽然两者都很容易开始，但请记住 Next.js 是建立在 React 之上的。 因此，如果不先学习 React 并了解它的工作原理，就无法学习 Next.js。 幸运的是，React 拥有平缓的学习曲线，非常适合初学者。

同样重要的是要注意 React 是相对非结构化的。 您必须安装和设置 React 路由器，并决定如何处理数据获取、图像优化和代码拆分。 此设置要求您安装和配置其他库和工具。

相比之下，Next.js 预安装和预配置了这些工具。 使用 Next.js，任何添加到pages文件夹的文件都会自动充当路由。 由于这种内置支持，Next.js 更易于日常使用，使您能够立即开始编写应用程序逻辑。

Next.js 和 React 特性

因为 Next.js 基于 React，所以两者共享一些特性。 然而，Next.js 更进一步，包括额外的功能，如路由、代码拆分、预渲染和开箱即用的 API 支持。 这些是您在使用 React 时需要自己配置的功能。

数据抓取

React 在客户端呈现数据。 服务器将静态文件发送到浏览器，然后浏览器从 API 获取数据以填充应用程序。 由于应用加载缓慢，此过程会降低应用性能并提供较差的用户体验。 Next.js 通过预渲染解决了这个问题。

通过预呈现，服务器在将应用程序发送到浏览器之前进行必要的 API 调用并获取数据。 因此，浏览器接收准备呈现的网页。

预渲染可以指静态站点生成（SSG）或服务器端渲染（SSR）。 在 SSG 中，HTML 页面在构建时生成并重复用于多个请求。 Next.js 可以生成包含或不包含数据的 HTML 页面。

下面是 Next.js 如何生成没有数据的页面的示例：

 function App() { return <div>Welcome</div> } export default App

对于使用外部数据的静态页面，请使用getStaticProps()函数。 从页面导出getStaticProps()后，Next.js 将使用它返回的道具预渲染页面。 此函数始终在服务器上运行，因此当页面使用的数据在构建时可用时，请使用getStaticProps() 。 例如，您可以使用它从 CMS 中获取博客文章。

 const Posts= ({ posts }) => { return ( <div className={styles.container}> {posts.map((post, index) => ( // render each post ))} </div> ); }; export const getStaticProps = async () => { const posts = getAllPosts(); return { props: { posts }, }; };

在页面路径依赖于外部数据的情况下，使用getStaticPaths()函数。 因此，要根据帖子 ID 创建路径，请从页面导出getStaticPaths() 。

例如，您可以从pages/posts/[id].js导出getStaticPaths() ，如下所示。

 export getStaticPaths = async() => { // Get all the posts const posts = await getAllPosts() // Get the paths you want to pre-render based on posts const paths = posts.map((post) => ({ params: { id: post.id }, })) return { paths, fallback: false } }

getStaticPaths()通常与getStaticProps()搭配使用。 在此示例中，您将使用getStaticProps()来获取路径中 ID 的详细信息。

 export const getStaticProps = async ({ params }) => { const post = await getSinglePost(params.id); return { props: { post } }; };

在 SSR 中，数据在请求的时间被获取并发送到浏览器。 要使用 SSR，请从要呈现的页面导出getServerSide()道具函数。 服务器在每次请求时调用此函数，这使得 SSR 对于使用动态数据的页面非常有用。

例如，您可以使用它从新闻 API 中获取数据。

 const News = ({ data }) => { return ( // render data ); }; export async function getServerSideProps() { const res = await fetch(`https://app-url/data`) const data = await res.json() return { props: { data } } }

每次请求都会获取数据，并通过 props 传递给 News 组件。

代码拆分

代码拆分将代码分成浏览器可以按需加载的块。 它减少了在初始加载期间发送到浏览器的代码量，因为服务器只发送用户需要的内容。 Webpack、Rollup 和 Browserify 等打包器支持 React 中的代码拆分。

Next.js 支持开箱即用的代码拆分。

使用 Next.js，每个页面都是代码拆分的，向应用程序添加页面不会增加包的大小。 Next.js 还支持动态导入，允许您导入 JavaScript 模块并在运行时动态加载它们。 动态导入有助于加快页面速度，因为包是延迟加载的。

例如，在下面的Home组件中，服务器不会在初始包中包含 hero 组件。

 const DynamicHero = dynamic(() => import('../components/Hero'), { suspense: true, }) export default function Home() { return ( <Suspense fallback={`Loading...`}> <DynamicHero /> </Suspense> ) }

相反，悬念的后备元素将在加载英雄组件之前呈现。

Next.js 与 React 中的 API 支持

Next.js API 路由功能使您能够在同一代码库中编写后端和前端代码。 保存在/pages/api/文件夹中的任何页面都映射到/api/*路由，Next.js 将其视为 API 端点。

例如，您可以创建一个返回当前用户名的pages/api/user.js API 路由，如下所示：

 export default function user(req, res) { res.status(200).json({ username: 'Jane' }); }

如果您访问https://app-url/api/user URL，您将看到用户名对象。

 { username: 'Jane' }

当您想要屏蔽您正在访问的服务的 URL 或者想要在不对整个后端应用程序进行编码的情况下对环境变量保密时，API 路由很有用。

表现

Next.js 在通过简化流程创建性能更好的应用程序方面无疑更胜一筹。 SSR 和 SSG Next.js 应用程序的性能优于客户端渲染 (CSR) React 应用程序。 通过在服务器上获取数据并发送浏览器需要呈现的所有内容，Next.js 消除了对 API 的数据获取请求的需要。 这意味着更快的加载时间。

此外，因为 Next.js 支持客户端路由。 每次用户导航到另一条路线时，浏览器不必从服务器获取数据。 此外，Next.js 图像组件支持自动图像优化。 图像仅在进入视口时加载。 在可能的情况下，Next.js 还提供 WebP 等现代格式的图像。

Next.js 还提供字体优化、智能路由预取和捆绑优化。 这些优化在 React 中不会自动可用。

支持

因为 React 比 Next.js 存在的时间更长，所以它拥有更广泛的社区。 然而，许多 React 开发人员正在采用 Next.js，因此社区正在稳步增长。 开发人员可以更轻松地找到他们遇到的问题的现有解决方案，而不必从头开始构建解决方案。

Next.js 还具有出色的文档，其中包含易于理解的全面示例。 尽管 React 很受欢迎，但 React 文档并不那么易于导航。

概括

选择 Next.js 或 React 取决于应用程序的要求。

Next.js 通过提供提高性能的结构和工具来增强 React 的功能。 这些工具，如路由、代码拆分和图像优化，内置于 Next.js 中，这意味着开发人员无需手动配置任何内容。 得益于这些特性，Next.js 易于使用，开发人员可以立即开始编写业务逻辑。

由于渲染选项不同，Next.js 适用于服务器端渲染应用程序或结合静态生成和 Node.js 服务器端渲染的应用程序。 此外，由于 Next.js 提供的优化功能，它非常适合需要快速的网站，例如电子商务商店。

React 是一个 JavaScript 库，可以帮助您创建和扩展健壮的前端应用程序。 它的语法也很简单，特别是对于具有 JavaScript 背景的开发人员而言。 此外，您可以控制在应用程序中使用的工具以及如何配置它们。

规划您自己的称霸世界的应用程序？ 深入了解 Kinsta 为支持 React 和 Next.js 的服务托管 Node.js 应用程序的方法。