Next.JS 简介

2025-05-26

Next.JS 简介

大家好，希望你一切顺利。今天我们来聊聊 Next.JS！为什么开发者突然开始使用 Next.JS 来开发 Web 应用，而不是使用 Create React App？

别担心，今天我们将解决您对 Next.JS 的所有疑问！

对于那些正在思考“啊！又是新的框架新的语法！”的人来说

Next JS

让我来澄清一下 Next.JS 在底层使用 React 库的情况！

那么为什么 Next.JS 优于 CRA（创建 React 应用）

在开始使用 Next.JS 之前，我们先来了解一下开发人员在使用 Create React App 时会遇到哪些问题！

原因 1 SEO 优先的 Web 应用

我们都知道 SEO（搜索引擎优化）是网站的核心功能之一，如果您不知道 CRA 应用程序不适合 SEO 友好型网站。

为什么？

我们都知道React 是一个 JavaScript 库，这意味着所有操作都发生在客户端。所以，除非用户不打算打开网站，否则只会看到一个像这样带有 div 标签的空白 HTML 页面。

<div id="app">
</div>
Enter fullscreen mode Exit fullscreen mode

Google 搜索引擎机器人会深入挖掘你的网站。 它们只会得到一个空空如也的 index.html 页面！虽然他们声称可以在挖掘页面的同时运行 JS，但这并非 100% 正确。

原因 2 捆绑应用程序

想象一下，您正在处理大规模应用程序。将数百行 JavaScript 代码打包成一个文件会影响性能，为了避免这种情况，您需要手动将打包的代码拆分成不同的文件。

原因 3 性能问题

如果某些用户尝试在低端设备上打开您的网站，则网站可能会需要一些时间才能加载。这是因为传统的 React 应用在客户端而不是服务器端加载所有内容。

Next.JS 生产就绪框架

Next.JS 是一个生产就绪框架。它支持服务器端渲染 (SSR) 以及混合渲染。

页面路由

Next.JS 具有内置路由系统，允许我们创建页面而无需集成任何库，例如react-router-dom.

您还可以创建嵌套路由！这是决胜局。

这还不够，Next.JS 会根据页面来打包你的项目。所以，如果你有不同的页面，Next.JS 会自动帮你进行代码拆分。

您可以在文档中阅读有关路由的更多信息。

对于那些不了解这个术语的人来说，服务器端渲染意味着您可以在服务器端运行 JavaScript 文件并将 HTML 内容直接传送到浏览器，就像 PHP 等服务器端语言一样！

现在你可能会想，我的 React 应用还能像以前一样工作吗？是的，这个过程叫做Hydration。 它将确保 JavaScript 文件与 HTML 内容一起成功加载到浏览器中。这样你就可以轻松地创建 SEO 友好的网站。

以上是关于 SSR 的内容，但Next.js 允许你选择如何获取数据。如果你之前使用过 Gastby，你就会知道可以用 React 制作静态网站。

Next.JS 提供混合渲染！

Next.JS 中的数据获取

我们可以在 Next.JS 中通过 3 种方式获取数据。

我不会深入讲解理论，而是直接展示如何在 Next.JS 中获取数据。

服务器端渲染（SSR）

export const getServerSideProps = async context => {
  const cakes = await myFavoriteCakesAPI();

  return {
       props: { cakes }
  };
}
Enter fullscreen mode Exit fullscreen mode

您可以getServerSideProps在每个页面中导出方法。此方法在每次请求时运行，用户将始终获得最新数据。下面我们返回 props cakes。这将把 props 作为页面的默认组件传递。

正如我之前所说，此方法在每个请求中都会运行，因此它可能有点影响性能。但在某些情况下，数据会频繁更新，例如记分牌、股票市场等。

静态站点生成 (SSG)

export const getStaticProps = async context => {
  const journals = await myLastYearJournals();

  return {
       props: { journals }
  };
}
Enter fullscreen mode Exit fullscreen mode

此方法仅在构建时运行！但在开发环境中，此方法将在每次请求时运行。

由于此方法仅在生产环境中运行构建时。您的 Web 应用程序可以快速向用户提供内容。您还可以通过 CDN 交付网站，这就是 Next.JS 的酷炫之处！一切都将变得快速！

由于该方法仅在构建时运行，因此即使数据得到更新，用户仍将拥有旧的缓存数据。

增量静态站点生成 (ISSG)

export const getStaticProps = async context => {
  const journals = await myLastYearJournals();

  return {
       props: { journals, revalidate: 60 }
  };
}
Enter fullscreen mode Exit fullscreen mode

这个方法是我最喜欢的方法。这个方法和上面的方法一样getStaticProps。唯一的区别是我们现在传递了新的属性revalidate。这意味着你的请求将在指定的秒数后重新验证，在本例中是60。

这是获取数据的合适方法之一。这将确保您的网站快速加载，并且用户也能获得更新的数据。

如果你已经理解了这个数据获取方法，那么你现在就可以创建一个 SEO 友好且快速的网站了。

但我有奖金给你！

JavaScript

使用 Next.js 进行图像优化

你还可以在 Next.JS 中优化图像！我们都知道，图像加载可能需要一段时间。尤其是在加载高质量图像时，这可能需要很长时间。

Next.Js 提供了图像组件，允许我们延迟加载图片。根据布局优化图片质量，从而优化网站的性能。

特征

  1. 改变图像质量
  2. 加载实际图像时占位符模糊图像
  3. 优先加载图像等等。

第三方脚本集成

import Script from 'next/script'
<Script
  id="stripe-js"
  src="https://js.stripe.com/v3/"
  strategy="lazyOnload"
  onLoad={() => {
    this.setState({ stripe: window.Stripe('pk_test_12345') })
  }}
/>
Enter fullscreen mode Exit fullscreen mode

在最新的 Next.js 11 中，我们可以使用脚本组件轻松添加第三方脚本。此外，它还允许您决定何时加载网站，例如交互前、交互后以及延迟加载。

以上就是 Next.js 的介绍！请在评论区告诉我你最喜欢这篇博客的哪一部分？还有，你计划在下一个项目中使用 Next.js 吗？

如果您想补充一些内容，请随意评论！

想要开始使用 Next.js 吗？查看文档

感谢阅读！祝你
编程愉快！:)

NextJS

文章来源：https://dev.to/ponikar/introduction-to-next-js-26c0
Devto 翻译
PREV
TypeScript 简介
NEXT
还在为 Promises 而苦恼吗？你并不孤单！该如何运用 Promises？感恩总结