Rain's Blog

站点地图可以增加网站的可见性和体验性，在 nextjs 中添加站点地图有多种方式。

如果你的网站足够小，那么可以手动维护一个sitemap.xml文件，将文件至于public目录中。
自动化，每次打包编译自动生成一份xml文件，同样存放于public目录中。
使用nextjs自身提供的方法，只要在app目录中创建一个名为sitemap的文件，

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
    const post ={
        slug:"useing sitemap on nextjs",
        date:"2024/06/26 11:09:25"
    }

    return {
        url: `https://rainc.io/post/${post.slug}`,
        lastModified: new Date(post.date).toISOString(),
        priority: 0.7,
        changefreq: "daily",
    }
}

这样访问https://rainc.io/sitemap.xml就能看到生成xml了。

如果需要生成多个站点地图文件，可以使用 generateSitemaps 函数，需要注意的是不用去导入generateSitemaps，只要保证文件中有这个方法就行

export async function generateSitemaps() {
  const posts = await getMDXs("/post");

  return posts.map((post) => ({
    url: `https://rainc.io/post/${post.slug}`,
    lastModified: new Date(post.date).toISOString(),
    priority: 0.7,
    changefreq: "daily",
  }));
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const sitemapEntries = await generateSitemaps();
  return sitemapEntries;
}

generateSitemaps 可以生成多个站点地图生产环境使用 product.com/sitemap/1 查看,开发环境使用 dev/sitemap/1.xml 查看。在next14.0.4的版本中即使注释generateSitemaps也会报错，详情见 github

nextjs sitemap 的应用