前言
在学习 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 的实现方式有三种:
- 非预渲染页面:该页面完全是 React 实现,不会在服务端执行预渲染,由客户端完成并内容替换。
- 预渲染页面:服务端渲染到 HTML,但客户端 JS 仍然在调用之后加载并执行。因为该页面所需的数据是相对不变的,这只需要在服务端调用预渲染一次即可,之后不用每次生成时都做。
- 静态页面:页面通过 Next.js 工具静态生成,相对不变的数据预渲染到 HTML 页面当中并且内容已经固定。在该页面使用 React 组件,需要的数据都已经在固定的 HTML 内中,不需要再次加载,等待时间更短。
Next.js 的基础用法
安装 Next.js
安装 Next.js 仅需在命令行中执行以下命令:
npm install next react react-dom
页面创建
在 Next.js 中,页面会被自动处理过程,仅需要在页面文件中编写用 JSX 语法编写 React 组件即可。下面的代码是方式一个简单的 Next.js 页面:
-- -------------------- ---- ------- ------ ----- ---- -------- ----- ----- - -- -- - ------ - ----- --------- ------------ ------ -- -- ------ ------- ------
启动 Next.js
在完成页面创建后,可以使用以下命令启动 Next.js:
npm run dev
这会启动一个开发服务器,然后你可以在 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