Next13.3中如何遍历动态页面生成站点地图（sitemap）

你不能直接通过$(slug)这类占位符生成动态页面的站点地图，核心是要先获取所有实际存在的slug值，再基于这些值生成对应URL条目。具体实现步骤如下：

1. 准备获取slug的数据源逻辑 #

先实现一个能拿到所有有效slug的方法，这个逻辑根据你的数据存储方式调整：

• 如果是数据库存储：写查询语句获取所有slug字段
• 如果是本地Markdown文件：读取文件目录、解析文件名或文件内的slug字段
• 如果是CMS（比如Contentful、Sanity）：调用对应的API接口获取slug列表

2. 在sitemap.js中异步生成条目 #

Next.js 13.3+ 的sitemap.js支持异步函数，你可以在其中先获取slug列表，再循环生成动态路由的站点地图条目：

const BASE_URL = 'https://acme.com';

// 替换为你的实际获取slug逻辑
async function getAllSlugs() {
  // 示例：返回从数据库/CMS/本地文件拿到的slug数组
  return ['first-post', 'second-post', 'tech-guide'];
}

export default async function sitemap() {
  // 静态页面条目
  const staticRoutes = [
    {
      url: BASE_URL,
      lastModified: new Date(),
    },
    {
      url: `${BASE_URL}/about`,
      lastModified: new Date(),
    },
    {
      url: `${BASE_URL}/blog`,
      lastModified: new Date(),
    },
  ];

  // 生成动态[slug]页面的条目
  const slugs = await getAllSlugs();
  const dynamicRoutes = slugs.map(slug => ({
    url: `${BASE_URL}/${slug}`, // 对应[slug]文件夹的路由，若嵌套则写`${BASE_URL}/blog/${slug}`
    lastModified: new Date(),
    // 可选：添加SEO相关字段
    // changefreq: 'weekly',
    // priority: 0.8
  }));

  // 合并静态与动态条目返回
  return [...staticRoutes, ...dynamicRoutes];
}

关键说明 #

• 占位符写法无效的原因：站点地图需要的是真实可访问的URL，Next.js无法自动枚举所有可能的slug值，必须你主动提供实际存在的slug列表
• 异步支持：sitemap.js允许导出异步函数，所以可以直接在内部做数据请求或文件读取操作
• 路由匹配：如果你的[slug]文件夹是嵌套在其他目录下（比如app/blog/[slug]），记得在生成URL时加上对应路径前缀

内容的提问来源于stack exchange，提问作者Nick Wild