Next.js项目生成sitemap.xml站点地图

在做SEO的过程中，常会需要在在 Next.js 项目中生成 sitemap.xml，

最常见的是 next-sitemap 这个库，非常适合静态生成 (SSG) 和服务器端渲染 (SSR) 的项目。

第一步：安装 next-sitemap

Npm安装
npm install next-sitemap或使用 Yarn：
yarn add next-sitemap或使用 Pnpm：
pnpm install next-sitemap

第二步：在项目根目录添加 next-sitemap.config.js

// next-sitemap.config.js
module.exports = {siteUrl: 'https://yourdomain.com', // 你的域名，确保是 HTTPSgenerateRobotsTxt: true, // 同时生成 robots.txt// 其他可选配置changefreq: 'daily',priority: 0.7,sitemapSize: 5000,
};

第三步：更新 package.json，添加生成命令

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

这样在你运行 next build 后，会自动生成 sitemap.xml 和 robots.txt。

第四步：运行构建生成 sitemap

npm run build

生成结果会在项目根目录的 public/ 文件夹下：

public/sitemap.xml

public/robots.txt

如果你有动态路由，比如 /blog/[slug].tsx，确保这些路径通过 getStaticPaths 正确生成，next-sitemap 会自动读取构建产物来生成完整 sitemap。

如果你用的是 App Router（Next.js 13+），也可以通过配置 .next-sitemap.config.js 实现支持，结构大致相同。

如有问题可以评论留言，如果感兴趣下一篇文章将分享 Nextra的sitemap生成