如何在Next.js 13中使用res.write()和res.end()生成拆分站点地图

Next.js 13的App Router不再支持getServerSideProps，但可以通过Route Handlers实现和Next.js 12相同的拆分站点地图功能，以下是具体实现方案：

1. 创建站点地图索引的Route Handler #

在app目录下新建sitemap.xml/route.ts文件，该文件会处理根域名下sitemap.xml的请求，生成包含所有拆分站点地图链接的索引文件：

import { NextResponse } from 'next/server';

// 保留你原有获取站点地图数据的逻辑
async function getSitemap() {
  // 示例：从API或数据库获取拆分站点地图的配置数据
}

// 保留你原有提取站点地图URL的逻辑
async function extractSitemapValues(details: any) {
  // 示例：从数据中提取所有拆分后的站点地图URL列表
}

export async function GET() {
  const details = await getSitemap();
  const sitemapURLs = await extractSitemapValues(details);

  // 构建站点地图索引的XML结构
  let sitemapIndex = `<?xml version='1.0' encoding='UTF-8'?>
<sitemapindex xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd"
         xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`;

  sitemapURLs.forEach((item) => {
    sitemapIndex += `
  <sitemap>
    <loc>${item}</loc>
  </sitemap>`;
  });

  sitemapIndex += `</sitemapindex>`;

  // 返回XML响应，设置正确的头信息
  return new NextResponse(sitemapIndex, {
    headers: {
      'Content-Type': 'text/xml; charset=utf-8',
      'Cache-Control': 'public, s-maxage=600, stale-while-revalidate=600',
    },
  });
}

2. 创建拆分的单个站点地图 #

针对不同分类/类型的页面，在app目录下创建动态路由的Route Handler，比如app/sitemap/[category]/route.ts，用于生成对应分类的站点地图：

import { NextResponse } from 'next/server';

// 根据分类获取该分类下的所有页面URL
async function getCategoryUrls(category: string) {
  // 示例：从API或数据库获取对应分类的页面URL列表
}

export async function GET(request: Request, { params }: { params: { category: string } }) {
  const { category } = params;
  const urls = await getCategoryUrls(category);

  // 构建单个站点地图的XML结构
  let sitemap = `<?xml version='1.0' encoding='UTF-8'?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd"
        xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">`;

  urls.forEach((url) => {
    sitemap += `
  <url>
    <loc>${url}</loc>
    <lastmod>${new Date().toISOString()}</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>`;
  });

  sitemap += `</urlset>`;

  return new NextResponse(sitemap, {
    headers: {
      'Content-Type': 'text/xml; charset=utf-8',
      'Cache-Control': 'public, s-maxage=600, stale-while-revalidate=600',
    },
  });
}

关键说明 #

• 访问https://your-domain.com/sitemap.xml会返回站点地图索引，其中包含所有拆分后的站点地图链接（如https://your-domain.com/sitemap/products）
• 如果仍在使用Next.js 13的Page Router（兼容模式），原有pages/sitemap.xml.tsx的实现方式依然有效，无需修改
• 可根据实际需求调整缓存策略的s-maxage和stale-while-revalidate参数，平衡更新频率和性能
• 确保所有拆分后的站点地图URL符合sitemap规范，可被搜索引擎正常抓取

内容的提问来源于stack exchange，提问作者Kelvin Ngo