如何在NextJS中使用`next-sitemap`包生成站点地图（sitemap）

上次我写的是如何在你的NextJS项目中为你的网站创建一个站点地图。在这篇文章中，我将解释如何使用next-sitemap包来自动化这个创建站点地图的过程。

在之前的博客里，我们手动通过手写XML代码来创建站点地图。但在这篇文章里，我们将重点介绍自动化生成站点地图。

这里链接到上一篇博客: 在 NextJS 中创建 Sitemap（只需 2 分钟）

关于 next-sitemap NPM 包📦 介绍

next-sitemap 是由 Vishnu Sankar 创建并维护的一个包，它是 NextJS 中生成站点地图的最受欢迎的包之一，在 GitHub 上拥有超过 3.4k 的星标。

这个包的目的其实很简单，但如果你希望提高你网站的搜索引擎优化（SEO）效果，这一点就变得非常重要。下面就是你自定义的包的内容。

适用于 next.js 的 Sitemap 生成器。为所有静态、预渲染、动态或服务器端页面生成一个或多个 sitemap 以及 robots.txt。

星号

目录

• 让我们开始吧🚀

• 步骤 1：安装包

• 步骤 2：创建配置文件

• 步骤 3：配置你的 package.json

• 步骤 4：运行构建

• 步骤 5：检查结果

• 进阶配置😎

• 最后一步：总结

• 有疑问？联系我们

……

咱们开始吧🚀

第一步：安装软件包

npm install next-sitemap
# 安装 next-sitemap 插件

全屏 退出全屏

在项目的根目录下创建一个 next-sitemap.config.js 文件

请保持文件名不变为 next-sitemap.config.js，否则将无法正常工作。

    /** @type {import('next-sitemap').IConfig} */
    module.exports = {
      siteUrl: process.env.SITE_URL || 'https://example.com',
      generateRobotsTxt: true, // (可选，默认为 false)
      // ...其他配置项
    }

全屏 退出全屏

在你的 package.json 文件中添加如下脚本内容

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

全屏模式 退出全屏

警告：使用 pnpm 时，如果你要使用 postbuild 步骤，需要在项目的根目录下创建一个 .npmrc 文件，否则只需定义构建为 build: "next build && next-sitemap"，我们继续。

第4步：执行构建任务

运行构建命令：```
npm run build

进入全屏 退出全屏

### 检查项目根目录中的 sitemap.xml 文件

|
app
| /pages
| /public
| /sitemap.xml
| /robots.txt

进入全屏 退出全屏

当构建成功时，你可以在项目根目录找到 `sitemap.xml` 和 `robots.txt` 文件。如果你不想要 `robots.txt` 文件，可以在 `next-sitemap.config.js` 文件中将 `generateRobotsTxt` 设置为 `false`。如果你允许，我想解释一下如何通过配置文件定制 `sitemap.xml`。

略

## 开发者友好配置😎

欢迎来到开发者专业配置，您可以根据需要自定义 sitemap.xml 文件，做得好，现在让我们开始吧。

# 如何在 *sitemap.xml* 中配置 URL 地址

默认情况下，该包会赋予所有页面相同的优先级，但我希望将首页优先级设为 1.0，其他页面优先级设为 0.8。这样就能做到这一点，只需在 `next-sitemap.config.js` 文件中添加如下代码。

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  changefreq: '每日',
  // 这里是新代码
  priority: 0.8,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  transform: async (config, path) => {
    let priority = config.priority
    let changefreq = config.changefreq
    // 设置首页和团队页面的较高优先权
    if (path === '/') {
      priority = 1.0 // 首页的最高优先权
      changefreq = '每小时' // 首页的更新频率，此设置仅为示例，请查阅站点地图文档或咨询您的SEO专家获取更合适的更新频率设置建议。
    }

    return {
      loc: path, // => 这会导出为 http(s)://<siteUrl>/<path>
      changefreq: config.changefreq,
      priority: priority, // 根据页面内容动态调整的优先权
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [], // 备用链接
    }
  },
}

全屏模式 退出全屏

### 如何在 sitemap.xml 里排除某些页面

例如，在 [ChakraFramer](https://chakraframer.com) 网站上，例如，我不想将 `/blank/*` 类似于 [这个链接](https://chakraframer.com/blank/components/hover-3d-card-multi-layer) 的链接包含在 `sitemap.xml` 文件中。我可以在 `next-sitemap.config.js` 文件中添加如下代码来实现这一点：

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  changefreq: 'daily',
  priority: 0.8,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  transform: async (config, path) => {
    let priority = config.priority
    let changefreq = config.changefreq
    // 此处设置首页的优先级
    if (path === '/') {
      priority = 1.0 // 首页的最高优先级
      changefreq = 'hourly' // 例如，每小时更新一次
    }

    return {
      loc: path, // 导出为路径 <path>
      changefreq: config.changefreq,
      priority: priority, // 备用引用，若配置中有alternateRefs则使用，否则为空数组
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
  // 这里的代码用于排除特定路径
  exclude: ['/blank/*'],
}

切换到全屏 退出全屏

### 所有配置选项

如果你想查看所有配置选项，可以去官网看看[官方文档](https://www.npmjs.com/package/next-sitemap#configuration-options)

* * *

## 最后，我的看法是

在这篇博客中，我介绍了如何使用 `next-sitemap` 包来自动化生成站点地图的方法。我还解释了如何根据您的需求自定义 `sitemap.xml` 文件。希望您觉得这篇博客有帮助。但是，如果 `next-sitemap` 不能满足您所需的自定义需求，您也可以像我在[之前的博客](https://dev.to/thesohailjafri/no-traffic-on-your-website-learn-how-to-create-sitemaps-in-nextjs-57lk)中所述那样手动创建站点地图，或者在我的下一篇文章中解释的那样通过编写自定义的 postbuild 脚本。

* * *

##  来联系一下

社交媒体 | 账号  
---|---  
YouTube | [@thesohailjafri](https://www.youtube.com/@thesohailjafri)  
X/推特 | [@thesohailjafri](https://twitter.com/thesohailjafri)  
领英 | [@thesohailjafri](https://www.linkedin.com/in/thesohailjafri/)  
Instagram | [@thesohailjafri](https://www.instagram.com/thesohailjafri/)  
GitHub | [@thesohailjafri](https://github.com/thesohailjafri)