域名 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️⃣），本站将关闭。届时我们或许会以另一种方式与你再相遇。

AXUM中文网

全栈：AXUM、React、NextJS 和 TailWindCSS

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 是 NextJS 自带的组件，不要和 React 课程中讲的 react-router 里面的同名组件混为一谈——NextJS 连 react-router 都不用，何况是它里面的同名组件。

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

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

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

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 的路由系统是最值得称赞的，它实现了自动路由功能——它会自动把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

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

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

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

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

要查看完整内容，请先登录
登录注册