Next.js静态生成项目（含动态路径）站点地图构建求助

核心解决思路 #

你用的全静态生成模式（仅getStaticProps/getStaticPaths）完全适配next-sitemap，不需要依赖服务端渲染逻辑。关键是在next-sitemap的配置文件里直接从GraphCMS拉取所有动态slug，生成对应的站点地图路径即可。

具体实现步骤 #

1. 安装next-sitemap #

npm install next-sitemap --save-dev

2. 项目根目录创建next-sitemap.config.js #

在配置文件里编写异步逻辑拉取GraphCMS的文章slug，生成动态路径：

const { request } = require('graphql-request');

// 替换为你的GraphCMS API地址
const GRAPHCMS_API = '你的GraphCMS API端点';
// 复用你在[slug].js中使用的SLUGLIST查询
const SLUGLIST = `
query SLUGLIST {
  posts {
    slug
  }
}
`;

module.exports = {
  siteUrl: '你的站点域名（例如https://example.com）',
  generateRobotsTxt: true, // 可选，自动生成robots.txt
  // 自定义路径属性（可选）
  async transform(config, path) {
    return {
      loc: path,
      changefreq: config.changefreq,
      priority: path === '/' ? 1.0 : 0.7, // 给首页设置更高优先级
      lastmod: new Date().toISOString(),
    };
  },
  // 拉取所有需要生成的路径
  async getPaths() {
    const { posts } = await request(GRAPHCMS_API, SLUGLIST);
    // 生成动态路径，注意前缀要和[slug].js的目录匹配
    // 比如[slug].js在pages根目录就写`/${post.slug}`，在pages/blog下就写`/blog/${post.slug}`
    const dynamicPaths = posts.map(post => `/posts/${post.slug}`);
    
    // 添加静态页面路径（根据你的实际页面调整）
    const staticPaths = ['/', '/about', '/contact'];
    
    return [...staticPaths, ...dynamicPaths];
  },
};

3. 在package.json中添加生成脚本 #

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

这样每次执行npm run build完成后，会自动在public目录下生成sitemap.xml和robots.txt。

注意事项 #

• 确保getPaths里的动态路径前缀和你的[slug].js文件所在目录完全一致，否则生成的站点地图路径会无效。
• 如果你的文章有更新时间字段，可以在transform函数里替换lastmod为文章的实际更新时间，提升SEO效果。
• 不需要修改原[slug].js里的任何代码，所有站点地图逻辑都在配置文件中完成。

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