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

在做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.xmlrobots.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生成

相关推荐
小蜜蜂嗡嗡8 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
liulilittle16 分钟前
LinkedList 链表数据结构实现 (OPENPPP2)
开发语言·数据结构·c++·链表
山河木马1 小时前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
2401_891957311 小时前
list的一些特性(C++)
开发语言·c++
努力只为躺平1 小时前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手1 小时前
大保剑:Promise的有趣体验
javascript
李大玄1 小时前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵1 小时前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
二十雨辰1 小时前
[尚庭公寓]07-Knife快速入门
java·开发语言·spring
Python大数据分析@1 小时前
Origin、MATLAB、Python 用于科研作图,哪个最好?
开发语言·python·matlab