React 学习笔记之 Next.js 红皮书学习总结

阅读时长 6 分钟读完

前言

在学习 React 过程中,不可避免地需要了解并掌握一些与 React 配合使用的工具或库。而 Next.js 作为一款流行的 React 服务端渲染框架,能够大大提升 React 应用的性能与 SEO,并且易于部署。本文将以 Next.js 官方文档《The Next.js Red Book》为基础,分享 Next.js 的学习总结并介绍其使用方法。

Next.js 简介

Next.js 是一款支持服务端渲染和静态页面生成的 React 框架。它强调“开箱即用”(out-of-the-box),提供了很多默认配置,因此很容易上手并快速构建出功能齐全的 React 应用。同时,Next.js 支持将应用部署到云端,具备高度可扩展性和出色的性能优化,多种优化方式的支持使得应用能够在各个方面得到优化。

Next.js 的核心特性

自动代码分割

使用 Next.js 可以实现自动代码分割,也就是说有了 Next.js,无需在开发中手动操作代码分割,Next.js 编译器会自动帮我们完成这个操作。这样一来就可以提高代码性能,使每个页面只加载所需要的代码。

服务端渲染

Next.js 通过服务端渲染,在首次访问时实时构建 HTML,并通过 CDN 方式节省加载时间。同时,Next.js 还提供了 getInitialProps 方法让用户更加简单地进行服务端渲染和数据加载。

静态页面生成

使用 Next.js,您可以方便地生成静态页面。这对应用的性能、搜索引擎优化和安全性都非常有帮助。对于具有访问数限制或需要多次在 CDN 上提供的页面,Next.js 静态站点导出是理想的解决方案。

Next.js 集成 React 的实现方式

Next.js 的集成 React 的实现方式有三种:

  1. 非预渲染页面:该页面完全是 React 实现,不会在服务端执行预渲染,由客户端完成并内容替换。
  2. 预渲染页面:服务端渲染到 HTML,但客户端 JS 仍然在调用之后加载并执行。因为该页面所需的数据是相对不变的,这只需要在服务端调用预渲染一次即可,之后不用每次生成时都做。
  3. 静态页面:页面通过 Next.js 工具静态生成,相对不变的数据预渲染到 HTML 页面当中并且内容已经固定。在该页面使用 React 组件,需要的数据都已经在固定的 HTML 内中,不需要再次加载,等待时间更短。

Next.js 的基础用法

安装 Next.js

安装 Next.js 仅需在命令行中执行以下命令:

页面创建

在 Next.js 中,页面会被自动处理过程,仅需要在页面文件中编写用 JSX 语法编写 React 组件即可。下面的代码是方式一个简单的 Next.js 页面:

-- -------------------- ---- -------
------ ----- ---- --------

----- ----- - -- -- -
  ------ -
    -----
      --------- ------------
    ------
  --
--

------ ------- ------

启动 Next.js

在完成页面创建后,可以使用以下命令启动 Next.js:

这会启动一个开发服务器,然后你可以在 http://localhost:3000/ 访问你的 Next.js 程序。

Next.js 数据获取

Next.js 提供了一种名为 getInitialProps 的方法,可以让开发者通过服务端获取数据并传递给组件。

下面的代码展示了如何在 Next.js 中使用 getInitialProps 方法:

-- -------------------- ---- -------
------ ----- ---- --------

----- ----- - -- ----- -- -- -
  ------ -
    -----
      -------- ------ - ----- ------
    ------
  --
--

--------------------- - ----- -- -- -
  ----- --- - ----- ---------------------------------------------------
  ----- ---- - ----- -----------
  ------ - ------ --------------------- --
--

------ ------- ------

Next.js 路由

Next.js 内置了一个路由系统,可以帮助开发者轻松处理页面之间的跳转。下面是如何实现一个简单路由的例子:

-- -------------------- ---- -------
------ ---- ---- ------------

----- ---- - -- -- -
  ------ -
    -----
      ----------- -- -------------
      -----
        ----- --------------
          -------- --------
        -------
      ------
    ------
  --
--

------ ------- -----

Next.js 中使用 CSS

开发者可以在 Next.js 中使用各种 CSS 样式库,例如 tailwindcss、styled-components。例如,在使用 styled-components 的例子中,你可以这样写代码:

-- -------------------- ---- -------
------ ------ ---- --------------------

----- ------ - --------------
  -------- -----
  ------------ -------
  ------- -----
  ----------------- --------
  ------ ------
  ---------- -----
  -------- - -----
--

----- ------ - -- -------- -- -- -
  ------ -
    -----
      --------
        ---- ---------------------- ------- ----- --
        ------ ------- ---------
      ---------
      ------ -------- -------
    ------
  --
--

------ ------- -------

总结

Next.js 的简单易用和高度集成的设计理念,将服务端渲染和静态页面的生成完美结合起来,使得页面首次加载速度得到了显著提升,同时也能为 SEO 提供优秀的支持。借助于 Next.js 的各种功能,我们可以为 React 应用增添很多特色与优势。 Next.js 非常适合开发中小型 Web 应用和博客,对于初学者来说,学习和了解 Next.js 是非常好的选择。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6473033e968c7c53b008b00b

纠错
反馈