域名 AXUM.RS 将于2025年10月到期。我们无意再对其进行续费,我们希望你能够接续这个域名,让更多 AXUM 开发者继续受益。
  • 方案1️⃣AXUM.RS 域名 = 3000
  • 方案2️⃣方案1️⃣ + 本站所有专题原始 Markdown 文档 = 5000
  • 方案3️⃣方案2️⃣ + 本站原始数据库 = 5500
如果你有意接续这份 AXUM 情怀,请与我们取得联系。
说明:
  1. 如果有人购买 AXUM.RS 域名(方案1️⃣),或者该域名到期,本站将启用新的免费域名继续提供服务。
  2. 如果有人购买了 AXUM.RS 域名,且同时购买了内容和/或数据库(方案2️⃣/方案3️⃣),本站将关闭。届时我们或许会以另一种方式与你再相遇。

NextJS: 内置组件及自动路由

NextJS 既然是 React 的框架,自然提供了一些内置组件来扩展 React。本章将介绍几个常用的 NextJS 内置组件,同时也将介绍 NextJS 的路由系统。

为了避免你产生疑惑,我先告诉你两个事实:

  • NextJS 使用的是自己实现的路由系统,而不是在 React 课程里说的那个 react-router。有关 NextJS 的路由将会在本章后面部分详细讲述。
  • 本章讲的组件都是 NextJS 内置的,不要和其它第三方提供的组件产生混淆

Head 组件

Head 组件什么鬼?HTML 里面的 <head>。恭喜你,答对了。我们先来回顾一下,上一章中“静态网站生成”最后构建并生成出来的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 组件中,加上我们需要的内容:

<Head>
  <title>AXUM中文网</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>

Link 组件

再次提醒,这里的 Link 是 NextJS 自带的组件,不要和 React 课程中讲的 react-router 里面的同名组件混为一谈——NextJS 连 react-router 都不用,何况是它里面的同名组件。

NextJS 的 Link 组件,就是用来创建超链接——用来创建组件之间通过路由跳转的超链接。也就是说,如果不是为了组件之间的路由跳转,不要使用它,而是直接使用 HTML 的 <a>

它的用法和 <a> 非常像:

<Link href="路由">文字</Link>

Image 组件

用来加载图片。你或许会说,图片而已用<img> 不香吗?Image 组件底层确实是使用 <img> 标签,而且用法和 <img> 也非常像。但它提供了增强功能:图片的懒加载功能。

但它有些限制:

  • 静态网站生成模式下,无法工作。就是说,它只在客户端渲染和服务端渲染时才有用
  • 它需要通过 heightwidth 属性来指定高度和宽度(可以通过使用fill来规避)。这一点让 tailwind 很不爽,因为 tailwind 都是用 CSS 的类来控制的

所以它的用法是:

<Image src="图片" alt="替换文本" width="宽度" height="高度" />

<Image src="图片" alt="替换文本" fill />

NextJS 的路由系统

NextJS 内置路由系统,无需额外安装——更不要手贱,用第三方路由系统替换它内置的路由系统

NextJS 内置路由系统,无需额外安装——更不要手贱,用第三方路由系统替换它内置的路由系统

静态自动路由

NextJS 的路由系统是最值得称赞的,它实现了自动路由功能——它会自动把pages下面的组件转换为路由!

比如有以下文件结构:

- pages
 - about.js
 - index.js
 - users
 	- index.js
 	- profile.js
 	- settings.js

NextJS 会进行自动路由:

除以上面这些与文件的目录结构一一对应的静态自动路由,NextJS 还支持动态自动路由。

动态自动路由

诸如 /news/:id/topic/:subject/:slug 这种动态路由,NextJS 是如何进行自动路由的呢?——答案是特殊的文件/目录名。

先来看 /news/:id,要实现 id 这个参数的动态路由,只需要将其页面组件的文件名改为 [id].jsx

- pages
	- news
		- [id].js

同理,/topic/:subject/:slug 就可以这样:

- pages
	- topic
		- [subject]
			- [slug].jsx

又比如:/blog/cate-:name/2022/11-:day 可以这样:

- pages
	- blog
		- cate-[name]
			- 2022
				- 11-[day].jsx

好了,理论知识至此结束,我们将在下一章使用目前所学的 NextJS 整合起来,实现一个稍微复杂的案例。撸起袖子准备大干一场吧!

要查看完整内容,请先登录