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

Baoing_2025-04-21 0:04

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

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

第一步：安装 `next-sitemap`

shell 复制代码

Npm安装
npm install next-sitemap

或使用 Yarn：
yarn add next-sitemap


或使用 Pnpm：
pnpm install next-sitemap

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

js 复制代码

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

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

json 复制代码

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

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

第四步：运行构建生成 `sitemap`

shell 复制代码

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生成

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

第一步：安装 next-sitemap

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

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

第四步：运行构建生成 sitemap

第一步：安装 `next-sitemap`

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

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

第四步：运行构建生成 `sitemap`