Next.js 自定义文档指南：从基础到实践

自定义文档是一项强大的功能，它允许我们在全局范围内配置元数据，这让我们在搜索引擎优化（SEO）方面占据了优势。此外，它还可以用于全局样式设置，我们将在稍后的内容中演示这一点。

在本文中，我们将学习如何创建 _document.js；这将极大地帮助我们进行应用的 SEO 优化，以及全局导入组件和库。

创建 Next.js 应用：
步骤 1： 使用以下命令创建一个新的 Next.js 项目。（请确保你已经安装了 npm 和 node）

npx create-next-app my-doc-app

步骤 2： 创建项目文件夹（即 my-doc-app）后，使用以下命令进入该目录：

cd my-doc-app

步骤 3： 在 pages 文件夹中创建一个 _document.js 文件：

touch _document.js

项目结构： 项目结构应如下所示：

!image这将是我们应用程序的结构。

在这里，因为我们要创建自定义的 _document，我们显然需要使用面向对象编程（OOP）的概念来覆盖默认的 Document，欲了解更多信息，你可以参考关于 ES6 继承的相关资料。

你可能已经注意到，INLINECODE8f2b3889 的结构类似于静态 HTML 文件，因此你也应该知道 document.js 仅在服务器端渲染，而不是在客户端渲染，所以像 onClick 这样的事件处理程序在这里是不会起作用的。

这项功能为我们提供了编写元标签和全局导入自定义链接的选项，这意味着每个页面都可以拥有自己的元标签和标题，如果没有提供，_document 将会接管这些设置。

示例： 下面将演示 Next.js 自定义文档的用法。
document.js: 在 INLINECODEda77bce0 文件中写入以下代码。

JavaScript


CODEBLOCK_83da1d2a

index.js: 在 index.js 文件中写入以下代码。

JavaScript


CODEBLOCK_8fe3e60d

运行应用程序的步骤： 在终端中运行以下命令来启动应用程序：

npm run dev

输出：

!image

现在，在应用程序页面上点击右键并选择 [检查] 以访问开发者工具，这将允许我们详细查看我们对网站所做的更改：

!image更新后的自定义文档

而在此之前它是这样的：

!image没有自定义文档

我们可以看到，我们：

• 添加了 description（描述） 标签，它将显示在搜索结果中。
• 添加了 author（作者） 标签，用于列出特定网站的创建者或所有者。
• 添加了 keywords（关键词），这非常重要，因为当有人使用这些关键词搜索网站时，我们的网站就会出现在搜索结果中。请务必只列出与你的内容、网站或业务相关的关键词。
• 引入了 bootstrap，这是一个流行的 CSS 框架，现在可以在全局范围内使用。同样，我们也可以在此部分引入像 jquery 这样的库或 Google 字体等组件。
• 我们还更改了页面的 icon（图标）。