Next.js中生成sitemap的简单方法

首先,让我们设置项目结构:

lua 复制代码
my-nextjs-app/
  ├── app/
  │   ├── page.tsx
  │   └── server-sitemap.xml/
  │       └── route.ts
  ├── public/
  ├── next-sitemap.config.js
  ├── package.json
  └── tsconfig.json

1. 安装依赖

在项目根目录运行以下命令:

bash 复制代码
npm install next-sitemap

2. 配置next-sitemap

创建next-sitemap.config.js文件:

typescript 复制代码
/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true,
  exclude: ['/server-sitemap.xml'],
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/server-sitemap.xml',
    ],
  },
}

3. 更新package.json

package.json中添加postbuild脚本:

json 复制代码
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next-sitemap",
    "start": "next start"
  }
}

4. 创建动态sitemap

app/server-sitemap.xml/route.ts文件中:

typescript 复制代码
import { getServerSideSitemap } from 'next-sitemap'

export async function GET() {
  // 这里可以从CMS或数据库获取动态URL
  const posts = await fetchPostsFromDatabase()

  return getServerSideSitemap([
    {
      loc: 'https://example.com',
      lastmod: new Date().toISOString(),
    },
    {
      loc: 'https://example.com/about',
      lastmod: new Date().toISOString(),
    },
    ...posts.map((post) => ({
      loc: `https://example.com/blog/${post.slug}`,
      lastmod: post.updatedAt.toISOString(),
    })),
  ])
}

async function fetchPostsFromDatabase() {
  // 模拟从数据库获取文章
  return [
    { slug: 'first-post', updatedAt: new Date('2025-02-20') },
    { slug: 'second-post', updatedAt: new Date('2025-02-21') },
  ]
}

5. 示例页面

app/page.tsx中:

typescript 复制代码
export default function Home() {
  return (
    <main>
      <h1>欢迎来到我的Next.js网站</h1>
      <p>这是一个使用next-sitemap生成sitemap的示例。</p>
    </main>
  )
}

6. 生成sitemap

运行构建命令:

bash 复制代码
npm run build

这将构建您的Next.js应用程序,然后运行next-sitemap来生成静态sitemap和robots.txt文件。

生成的文件将位于public目录中:

  • public/sitemap.xml
  • public/sitemap-0.xml
  • public/robots.txt

同时,动态生成的sitemap可以通过/server-sitemap.xml路径访问。

这个设置将为您的Next.js应用程序创建一个全面的sitemap解决方案,包括静态页面和动态生成的内容

相关推荐
百思可瑞教育几秒前
Vue.config.js中的Webpack配置、优化及多页面应用开发
前端·javascript·vue.js·webpack·uni-app·北京百思教育
患得患失9493 分钟前
【前端】【高德地图WebJs】【知识体系搭建】面要素知识点——>多边形,圆形, 矩形,图形编辑器
前端·编辑器·高德地图·amap
歪歪1005 分钟前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
码农小伙8 分钟前
单体到微服务拆分方案
微服务·架构
歪歪10010 分钟前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
失散131 小时前
分布式专题——10.2 ShardingSphere-JDBC分库分表实战与讲解
java·分布式·架构·shardingsphere·分库分表
面向星辰3 小时前
html各种常用标签
前端·javascript·html
梦6503 小时前
HTML新属性
前端
失散133 小时前
分布式专题——10.4 ShardingSphere-Proxy服务端分库分表
java·分布式·架构·shardingsphere·分库分表
东风西巷5 小时前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求