内容介绍
本专题假设你已经具备了基本的 HTML 5 、Javascript(ES6) 和 CSS 3 知识。本专题是为了补全 AXUM 全栈开发所需要的技术栈,而不是从零开始的前端课程,如果你还不具备以上知识,请通过其它途径学习完成之后,再来学习本专题。React: 简介与安装
本章将通过编程世界通用的“Hello World”程序,告诉你:创建 React 应用的几种方法、虚拟DOM、JSX以及将 React 挂载到真实 DOM 的步骤。- 支持试读
React:类式组件、函数式组件及state和props
本章将讨论 React 的类式组件、函数式组件以及 React 两个最重要的属性:`state` 和 `props`。 React: 组件的生命周期
本章将讨论 React 组件的常用生命周期。- 支持试读
React: 事件处理、表单处理及受控组件与非受控组件
本章讨论 React 的事件处理,以及表单处理时涉及两个策略:受控组件与非受控组件。 React: 流程控制与key
本章将讨论 React(JSX) 的条件判断和循环。React: 自定义组件及组件通讯
本章我们将正式开启 React 组件之路。虽然我们之前章节的都叫组件,但整个应用只有一个组件,略显单薄。同时,我们还将讨论组件之间如何进行通讯。React: 路由
本章将讨论 React 的路由:通过路由,你可以制作出“多页面”的系统。React: 状态共享
本章将通过一个非常典型的案例来讨论 React 的状态共享:只有登录用户才能看到某些内容。早期的 React 完全依靠其生态中的 redux 等第三方库来实现状态共享;现在 React 提供了官方的 `Context` 来实现这一目的。React: SEO挑战、服务端渲染及本地存储
经过紧张的学习,React 课程终于暂告一个段落了。本章将是一个相对轻松的内容,我们一起探讨一下 React 应用的 SEO 以及为什么需要服务端渲染,同时对 React 课程做个简单的小结。NextJS: 简介与安装
NextJS 是一个 React 框架,它提供了很多有用的功能把 React 的力量发挥地淋漓尽致。本章我们将开始 NextJS 之旅,首先自然是安装它,然后来一个「你好,NextJS」NextJS: 渲染模式和数据获取
趁你现在对我们刚刚讨论的有关 React 和 SEO 的问题还保持有较强的印象,我们先来讨论 NextJS 是如何利用多种渲染模式来应用 SEO 挑战的。NextJS: 内置组件及自动路由
NextJS 既然是 React 的框架,自然提供了一些内置组件来扩展 React。本章将介绍几个常用的 NextJS 内置组件,同时也将介绍 NextJS 的路由系统。NextJS: 开发博客系统
本章我们将使用 NextJS 开发一个小型的博客系统,你将学习到如何从远程服务器获取数据以及数据过滤、NextJS 常用组件的用法、NextJS 的自动路由等功能。Tailwind:简介与响应式设计的基本原则
TailwindCSS 是一款响应式的、移动设备优先的 CSS 工具类框架。本章对响应式布局、移动设备优先、断点等基本概念进行简要说明;并讨论几种安装 tailwind 的方式。Tailwind: 通过小示例体验它
本章通过两个小示例来体验一下 tailwind 的魔力。Tailwind: 默认配置
Tailwind 定义了一系列变量,比如颜色、大小、间距等。本章将介绍 tailwind 的一些默认设置。Tailwind: 撸一个按钮
本章将带你使用 tailwind 撸一个按钮Tailwind: 使用 flex 和 grid 进行响应式布局
本章我们将讨论使用 `flex` 和 `grid` 进行响应式布局,以及为什么不建议再使用 `float` 进行布局。- 支持试读
Tailwind: 撸一个带图标和动画效果的下拉框
本章将使用 tailwind 实现一个没有任何 Javscript 代码的纯 CSS 的下拉框,把应用到导航栏、菜单栏时,也被称为下拉菜单。同时我们将讨论如何在 tailwind 中使用图标,包括图标的进化史:从字体文件到SVG。 Tailwind: 撸一个报价卡片
本章我们将使用 tailwind 撸一个报价卡片。Tailwind: 撸一个响应式的纯CSS导航栏
本章将使用 tailwind 撸一个响应式的、纯 CSS 的导航栏。Tailwind: 集成到React/NextJS
本章将介绍如何将 Tailwind 集成到 React 或 NextJS 项目中。Tailwind: 复用
本章通过将之前撸的按钮改成 NextJS 版,进而讨论 Tailwind 的复用原则。Tailwind: 配置和插件
本章将讨论如何配置 tailwind,以及几个 tailwind 官方插件。Tailwind: 制作响应式博客
本章我们使用 tailwind 将之前课程中 NextJS 迷你博客改造为响应式的布局。
NextJS: 内置组件及自动路由
NextJS 既然是 React 的框架,自然提供了一些内置组件来扩展 React。本章将介绍几个常用的 NextJS 内置组件,同时也将介绍 NextJS 的路由系统。
为了避免你产生疑惑,我先告诉你两个事实:
- NextJS 使用的是自己实现的路由系统,而不是在 React 课程里说的那个 react-router。有关 NextJS 的路由将会在本章后面部分详细讲述。
- 本章讲的组件都是 NextJS 内置的,不要和其它第三方提供的组件产生混淆
Head
组件
Head
组件什么鬼?HTML 里面的 <head>
。恭喜你,答对了。我们先来回顾一下,上一章中“静态网站生成”最后构建并生成出来的HTML:(为了便于查看,这里进行了格式化。你如果要纠结原始版本,请回去上一章查看)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<link
rel="preload"
href="/_next/static/css/ef46db3751d8e999.css"
as="style"
/>
<link
rel="stylesheet"
href="/_next/static/css/ef46db3751d8e999.css"
data-n-g=""
/>
<noscript data-n-css=""></noscript>
<script
defer=""
nomodule=""
src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"
></script>
<script
src="/_next/static/chunks/webpack-8fa1640cc84ba8fe.js"
defer=""
></script>
<script
src="/_next/static/chunks/framework-8c5acb0054140387.js"
defer=""
></script>
<script
src="/_next/static/chunks/main-a15ee65a2f1e1948.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/_app-2398585b21d2d8c8.js"
defer=""
></script>
<script
src="/_next/static/chunks/pages/index-4c6abd58992a79df.js"
defer=""
></script>
<script
src="/_next/static/uuuuuuuuuuuuuuuuuuuuu/_buildManifest.js"
defer=""
></script>
<script
src="/_next/static/uuuuuuuuuuuuuuuuuuuuu/_ssgManifest.js"
defer=""
></script>
</head>
<body>
<div id="__next">
<div>
<h1>用户列表</h1>
<ul>
<li>
ID:
<!-- -->1<!-- -->, 姓名:
<!-- -->axum中文网1
</li>
<li>
ID:
<!-- -->2<!-- -->, 姓名:
<!-- -->axum中文网2
</li>
<li>
ID:
<!-- -->3<!-- -->, 姓名:
<!-- -->axum中文网3
</li>
<li>
ID:
<!-- -->4<!-- -->, 姓名:
<!-- -->axum中文网4
</li>
<li>
ID:
<!-- -->5<!-- -->, 姓名:
<!-- -->axum中文网5
</li>
<li>
ID:
<!-- -->6<!-- -->, 姓名:
<!-- -->axum中文网6
</li>
</ul>
</div>
</div>
<script id="__NEXT_DATA__" type="application/json">
{
"props": { "pageProps": {} },
"page": "/",
"query": {},
"buildId": "uuuuuuuuuuuuuuuuuuuuu",
"nextExport": true,
"autoExport": true,
"isFallback": false,
"scriptLoader": []
}
</script>
</body>
</html>
有点长,但问题不大,请你检查一下,上面这个由 NextJS 生成的最终代码里,是不是:
- 缺少了
<title>
- 缺少了响应式布局最关键的
<meta name="viewport" content="width=device-width, initial-scale=1">
(当然,NextJS提供了viewport
,只是不适合响应式布局)
Head
组件就是为了让你有自定义 HTML <head>
的能力。
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>AXUM中文网</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<h1>你好,axum.rs —— 来自 Next.js 的问候</h1>
</>
);
}
-
import Head from 'next/head'
:导入Head
组件 -
在
Head
组件中,加上我们需要的内容:<Head> <title>AXUM中文网</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </Head>
import Head from 'next/head'
:导入 Head
组件
在 Head
组件中,加上我们需要的内容:
本节代码:axum-rs-next-head
Link
组件
再次提醒,这里的 Link
是 NextJS 自带的组件,不要和 React 课程中讲的 react-router 里面的同名组件混为一谈——NextJS 连 react-router 都不用,何况是它里面的同名组件。
NextJS 的 Link
组件,就是用来创建超链接——用来创建组件之间通过路由跳转的超链接。也就是说,如果不是为了组件之间的路由跳转,不要使用它,而是直接使用 HTML 的 <a>
它的用法和 <a>
非常像:
Image
组件
用来加载图片。你或许会说,图片而已用<img>
不香吗?Image
组件底层确实是使用 <img>
标签,而且用法和 <img>
也非常像。但它提供了增强功能:图片的懒加载功能。
在加载一张大图片的时候,这个增强功能非常有用,它会先呈现该图片的低像素版本,同时在后台异步获取原始图片,等到原始图片完全获取后,就使用原始图片替换低像素版本——这一切都是由nextjs自动完成的,你不需要手动提供低像素图片,你也不需要写任何代码实现这种功能。
但它有些限制:
- 静态网站生成模式下,无法工作。就是说,它只在客户端渲染和服务端渲染时才有用
- 它需要通过
height
和width
属性来指定高度和宽度(可以通过使用fill
来规避)。这一点让 tailwind 很不爽,因为 tailwind 都是用 CSS 的类来控制的
所以它的用法是:
<Image src="图片" alt="替换文本" width="宽度" height="高度" />
<Image src="图片" alt="替换文本" fill />
NextJS 的路由系统
我们先来回答开篇说的问题:为什么 NextJS 不使用 react-router?你要明确的是:react-router 也是第三方提供的组件,并不是 React 内置的。身为 React 的框架,NextJS 自然有选择它要使用哪个路由系统的权力——更重要的是,它完全可以自己实现路由系统。事实上,NextJS 的路由系统非常厉害,根本没有理由使用 react-router 等第三方路由系统。
NextJS 内置路由系统,无需额外安装——更不要手贱,用第三方路由系统替换它内置的路由系统
NextJS 内置路由系统,无需额外安装——更不要手贱,用第三方路由系统替换它内置的路由系统
静态自动路由
NextJS 的路由系统是最值得称赞的,它实现了自动路由功能——它会自动把pages
下面的组件转换为路由!
比如有以下文件结构:
- pages
- about.js
- index.js
- users
- index.js
- profile.js
- settings.js
NextJS 会进行自动路由:
页面组件 | 自动路由 |
---|---|
index.js | / |
users/index.js | /users |
users/profile.js | /users/profile |
users/settings.js | /users/settings |
about.js | /about |
动态自动路由
诸如 /news/:id
、/topic/:subject/:slug
这种动态路由,NextJS 是如何进行自动路由的呢?——答案是特殊的文件/目录名。
先来看 /news/:id
,要实现 id
这个参数的动态路由,只需要将其页面组件的文件名改为 [id].jsx
:
- pages
- news
- [id].js
- pages
- topic
- [subject]
- [slug].jsx
又比如:/blog/cate-:name/2022/11-:day
可以这样:
好了,理论知识至此结束,我们将在下一章使用目前所学的 NextJS 整合起来,实现一个稍微复杂的案例。撸起袖子准备大干一场吧!