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解决方案,包括静态页面和动态生成的内容

相关推荐
一只小风华~21 分钟前
CSS @media 媒体查询
前端·css·媒体
门思科技33 分钟前
LoRaWAN 的网络拓扑全解析:架构、原理与应用实践
服务器·网络·人工智能·科技·物联网·架构
shix .1 小时前
最近 | 黄淮教务 | 小工具合集
前端·javascript
John_ToDebug1 小时前
Chrome 内置扩展 vs WebUI:浏览器内核开发中的选择与实践
前端·c++·chrome
烛阴1 小时前
解锁动态键:TypeScript 索引签名完全指南
前端·javascript·typescript
小马哥编程2 小时前
【软考架构】第6章 数据库基本概念
数据库·oracle·架构
上单带刀不带妹2 小时前
ES6 中的 Proxy 全面讲解
前端·ecmascript·es6·proxy
泽虞2 小时前
《LINUX系统编程》笔记p3
linux·运维·服务器·c语言·笔记·面试
11054654013 小时前
37、需求预测与库存优化 (快消品) - /供应链管理组件/fmcg-inventory-optimization
前端·信息可视化·数据分析·js
nunumaymax3 小时前
在图片没有加载完成时设置默认图片
前端