如何使用next-sitemap在Next.js应用中添加动态server-sitemap.xml

前置准备 #

• 首先安装next-sitemap依赖：

npm install next-sitemap
# 或
yarn add next-sitemap

动态站点地图页面编写 #

你需要在pages目录下新建server-sitemap.xml.tsx文件，你的现有代码存在两处语法错误，修正后的完整代码如下：

import { GetServerSideProps } from "next"
import { getServerSideSitemap, ISitemapField } from "next-sitemap"
const { all_product_get }  = require("../../src/api/guest")

// 修正了GetServerSideProps类型的声明位置
export const getServerSideProps: GetServerSideProps = async (ctx) => {
  let data = [] 
  await all_product_get().then(res => {
    // 修正了变量赋值语法，将:改为=
    data = res.data.data
  })
  const fields: ISitemapField[] = data.map(item => ({
    loc: `https://sivanland.com/product/detail/${item._id}`,
    lastmod: new Date().toISOString(),
    // 可选配置：更新频率、权重
    changefreq: 'daily',
    priority: 0.8
  }))
  return getServerSideSitemap(ctx, fields);
};

// 此处不需要导出实际组件内容
export default function Site(){}

基础配置补充 #

在项目根目录新建next-sitemap.config.js配置文件，用来统一管理站点地图相关配置：

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  // 替换为你的站点域名
  siteUrl: 'https://sivanland.com',
  // 自动生成robots.txt
  generateRobotsTxt: true,
  // 将动态生成的server-sitemap加入总站点地图索引和robots.txt
  additionalPaths: async (config) => {
    return [
      {
        loc: `${config.siteUrl}/server-sitemap.xml`,
        lastmod: new Date().toISOString(),
      }
    ]
  },
  // 排除自动生成静态sitemap时收录server-sitemap页面本身
  exclude: ['/server-sitemap.xml'],
  // 可选：配置robots.txt规则
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
      },
    ],
    // 显式加入动态sitemap地址
    additionalSitemaps: [
      'https://sivanland.com/server-sitemap.xml',
    ],
  },
}

命令配置 #

在package.json的scripts中添加自动生成命令，会在项目build完成后自动执行静态站点地图生成：

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

效果验证 #

项目启动后访问/server-sitemap.xml路径即可看到动态生成的产品站点地图，build后生成的根目录sitemap.xml会同时包含静态页面和动态站点地图的索引，搜索引擎抓取时会自动读取所有站点地图内容。

注意：如果你使用的是Next.js 13+ App Router架构，需要替换为Route Handler写法实现动态sitemap，以上配置仅适用于Pages Router架构。

内容的提问来源于stack exchange，提问作者Ali raz