如何在Next.js的sitemap中添加构建时无对应页面的URL参数

你当前的代码仅扫描了pages目录下的静态文件，要拿到动态页面的对应构建数据以及添加自定义URL参数，按以下步骤修改/pages/sitemap.xml.js即可：

步骤1：核心思路 #

sitemap页面本身可以通过getStaticProps在构建阶段运行，你可以直接调用生成动态页面时使用的数据源（接口/本地JSON文件），也可以直接读取Next.js构建生成的页面序列化数据，拼接你需要的任意URL参数，不需要额外生成对应页面。

步骤2：完整修改后的代码示例 #

import fs from 'fs'
const baseUrl = '替换为你的站点域名'

function generateSitemap(pages) {
  return `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${pages
      .map(({url, lastmod = new Date().toISOString(), changefreq = 'monthly', priority = '1.0'}) => {
        return `
          <url>
            <loc>${url}</loc>
            <lastmod>${lastmod}</lastmod>
            <changefreq>${changefreq}</changefreq>
            <priority>${priority}</priority>
          </url>
        `;
      })
      .join("")}
  </urlset>
  `
}

export async function getStaticProps() {
  // 1. 收集静态页面
  const staticPages = fs
    .readdirSync("pages")
    .filter((staticPage) => {
      return ![
        "_app.js",
        "_document.js",
        "_error.js",
        "sitemap.xml.js",
      ].includes(staticPage) && !staticPage.includes('[')
    })
    .map((staticPagePath) => {
      const path = staticPagePath.replace('.js', '').replace('index', '')
      return {url: `${baseUrl}/${path}`}
    });

  // 2. 收集动态页面数据，可自定义任意URL参数
  // 示例：直接复用生成动态页面时的数据源
  const dynamicPageData = JSON.parse(fs.readFileSync('你的动态页面数据源路径，比如public/data/list.json', 'utf-8'))
  // 也可以调用内部接口拉取最新数据：const dynamicPageData = await fetch('内部数据接口地址').then(res => res.json())
  const dynamicPages = dynamicPageData.map(item => {
    return {
      // 可自由添加URL参数，无需构建对应页面
      url: `${baseUrl}/detail/${item.id}?utm_source=sitemap`,
      lastmod: item.updatedAt,
      priority: '0.8'
    }
  })

  // 3. 合并所有页面生成sitemap
  const allPages = [...staticPages, ...dynamicPages]
  const sitemap = generateSitemap(allPages)
  fs.writeFileSync('public/sitemap.xml', sitemap)

  return {
    props: {}
  }
}

export default function Sitemap() {}

注意事项 #

• 如果你的项目用了App Router，写法略有不同，需要在app目录下生成sitemap.ts导出GET方法即可，核心逻辑和上面一致
• 自定义URL参数不需要对应实际构建的页面，只要你前端路由能处理对应的参数即可，搜索引擎爬取时会正常收录
• 如果你需要读取Next.js构建时生成的动态页面序列化数据，可以读取.next/server/pages/[你的动态路由目录]下的.html或者.json文件，提取对应的参数值拼接URL

内容的提问来源于stack exchange，提问作者Shoaib Ahmed