Next.js中getServerSideProps实现嵌套动态路由生成sitemap xml的疑问

安全阿岳

2026-9-29

问题核心原因

你存在两个认知和操作误区：

Next.js的路由匹配规则完全依赖pages目录下的文件/目录命名，getServerSideProps是路由匹配成功后才会执行的逻辑，它的返回值不能控制路由匹配规则，你之前尝试用返回slug prop修改路由的思路本身是错误的。
要输出XML格式的站点地图，不能走默认的React组件渲染HTML的流程，需要直接在getServerSideProps中写入响应内容并结束响应。

解决方法

1. 调整文件路由结构

首先在pages目录下创建对应层级的动态路由文件，匹配你要的[type]/sitemap-[type].xml路径，文件结构如下：

pages/
└── [type]/
    └── sitemap-[type].xml.js

Next.js 9.5及以上版本原生支持带前后缀的动态路由命名，这个文件会自动匹配所有/xxx/sitemap-xxx.xml格式的请求，路由参数type可以正常在getServerSideProps的query中获取。

2. 调整`getServerSideProps`逻辑直接输出XML

代码示例如下：

export async function getServerSideProps(context) {
  const {
    res,
    query: { type },
  } = context;

  // 此处根据type参数生成对应站点地图的XML内容
  const sitemapContent = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <!-- 替换为你实际的站点地图条目 -->
</urlset>`;

  // 设置响应头为XML类型，避免被识别为HTML
  res.setHeader('Content-Type', 'text/xml');
  // 写入XML内容
  res.write(sitemapContent);
  // 直接结束响应，跳过后续组件渲染流程
  res.end();

  return {
    props: {},
  };
}

// 该组件不会实际渲染，仅作为路由文件的必要导出
export default function SitemapRoute() {
  return null;
}