“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《如何在 Nextjs 应用程序中安装和使用“next-sitemap”：分步指南》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

如果您使用 next.js 构建网站，您可能希望搜索引擎有效地发现您的页面并为其建立索引。改进此过程的一种方法是创建站点地图。站点地图是一个列出您网站上所有 url 的文件，可帮助 google 等搜索引擎更快地抓取您的网站并将其编入索引。

在本指南中，我们将逐步介绍如何在 next.js 项目中安装和配置 next-sitemap。我们还将介绍拥有站点地图的好处，并包含带有“hello world”next.js 应用程序的示例代码以说明其工作原理。

使用下一个站点地图的好处

在我们深入了解安装过程之前，让我们简要讨论一下使用 next-sitemap 的主要好处：

1. 改进的 seo：结构良好的站点地图可帮助 google 等搜索引擎更有效地发现您的页面，从而实现更好的索引和潜在的更高搜索排名。

2. 更快的抓取：通过向搜索引擎提供您网站的路线图，您可以让他们更快地抓取您的页面并为其建立索引。

3. 处理动态路由：对于具有动态路由的网站，下一个站点地图可以轻松为动态内容生成 url，确保所有页面都可被发现。

4. 自定义站点地图：下一个站点地图允许您使用设置优先级、更改频率甚至排除某些页面等选项来自定义站点地图。

第 1 步：安装下一个站点地图

首先，您需要在 next.js 项目中安装 next-sitemap 包。在终端中运行以下命令：

npm install next-sitemap

或者，如果您使用的是 yarn：

yarn add next-sitemap

第2步：创建next-sitemap.js配置文件

安装软件包后，下一步是在项目的根目录下创建一个名为 next-sitemap.config.js 的配置文件。该文件将包含用于生成站点地图的设置。

这是基本配置：

// next-sitemap.config.js
module.exports = {
  siteurl: process.env.site_url || 'http://localhost:3000', // your website's url
  generaterobotstxt: true, // (optional) generates a robots.txt file
  sitemapsize: 7000, // number of urls per sitemap file
}

在上面的代码中，我们使用 siteurl 指定您网站的基本 url。 generaterobotstxt 选​​项会在站点地图旁边生成一个 robots.txt 文件，而 sitemapsize 则确定要包含在每个站点地图文件中的 url 数量。

步骤 3：使用 sitemap 脚本更新 package.json

现在，您需要在 package.json 文件中添加一个脚本，以便在构建项目时生成站点地图。

具体操作方法如下：

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

这将确保每次构建后，都会根据您的配置自动生成站点地图。

第 4 步：构建并生成站点地图

现在一切都已设置完毕，请运行以下命令来构建项目并生成站点地图：

npm run build

或者用纱线：

yarn build

构建完成后，将在项目的 public/ 文件夹中生成 sitemap.xml 文件（以及可选的 robots.txt 文件）。这些文件将包含您的 next.js 应用程序的所有 url，可供搜索引擎抓取。

示例：带有 next-sitemap 的“hello world”next.js 应用程序

为了演示 next-sitemap 的工作原理，让我们创建一个简单的“hello world”next.js 应用程序。这是一个基本的 next.js 页面：

// pages/index.js
export default function home() {
  return (
    

      
hello world
      
welcome to my next.js app!
    
  );
}

现在，像这样配置你的 next-sitemap.config.js：

// next-sitemap.config.js
module.exports = {
  siteurl: process.env.site_url || 'http://localhost:3000',
  generaterobotstxt: true,
};

接下来，将以下内容添加到您的 package.json 中：

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

运行 npm run build 后，您将在 public/ 目录中找到您的站点地图，其中包含“hello world”主页的 url。

现场演示

我的网站 https://rajeshkumaryadav.com 正在使用此包在构建过程中自动生成站点地图。下面是包含 sitemap.xml

的 robots.txt

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

结论

按照本指南中概述的步骤，您现在已将 next-sitemap 集成到您的 next.js 项目中。该工具提供了一种生成站点地图和robots.txt文件的简单方法，可以显着提高您网站的seo并确保搜索引擎可以有效地发现您的所有内容。

通过此设置，您就可以让您的 next.js 应用程序对搜索引擎更加友好且索引更好！

到这里，我们也就讲完了《如何在 Nextjs 应用程序中安装和使用“next-sitemap”：分步指南》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！