Next.js 13.4.6动态站点地图生成遇404问题求助

核心问题分析 #

你当前的代码仅返回URL对象数组，但Next.js 13 App Router中，sitemap.xml需要作为路由端点存在，且必须返回标准XML格式的响应，而非单纯的对象数组。同时你的代码存在几处语法逻辑错误需要修正。

完整实现步骤与代码示例 #

1. 创建正确的路由文件

在项目app目录下，创建sitemap.xml/route.ts（若使用JS则创建route.js），该文件会直接对应/sitemap.xml的访问端点。

2. 修正代码逻辑并生成XML响应

以下是修正后的完整代码，包含错误修复和XML生成逻辑：

import axios from 'axios';
import { NextResponse } from 'next/server';

interface TransformedEntry {
  contentType: string;
  id: string;
  updatedAt: string;
}

interface ApiResponseEntries {
  data: TransformedEntry[];
  status: number;
}

// 根域名，生产环境替换为实际域名
const rootUrl = "http://localhost:3000";

export async function GET() {
  try {
    // 调用CMS API获取文章数据
    const response: AxiosResponse<ApiResponseEntries> = await axios.get(`${rootUrl}/api/routes/contentful/entries`);

    // 筛选出类型为blogPost的条目（原代码误用map，应使用filter）
    const blogPostEntries: TransformedEntry[] = response.data.data.filter(
      (entry: TransformedEntry) => entry.contentType === "blogPost"
    );

    // 生成博客文章的站点地图条目
    const blogPosts = blogPostEntries.map((entry) => `
      <url>
        <loc>${rootUrl}/blog/${entry.id}</loc>
        <lastmod>${new Date(entry.updatedAt).toISOString()}</lastmod>
      </url>
    `).join('');

    // 生成静态路由的站点地图条目
    const staticRoutes = ["/", "/blog"].map((route) => `
      <url>
        <loc>${rootUrl}${route}</loc>
        <lastmod>${new Date().toISOString()}</lastmod>
      </url>
    `).join('');

    // 组装完整的XML内容
    const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${staticRoutes}
  ${blogPosts}
</urlset>`;

    // 返回XML响应，设置正确的Content-Type
    return new NextResponse(sitemapXml, {
      headers: {
        "Content-Type": "application/xml",
      },
    });
  } catch (error) {
    console.error("生成站点地图出错:", error);
    // 出错时返回500响应
    return new NextResponse("生成站点地图失败", { status: 500 });
  }
}

3. 关键修正点说明

• 路由文件位置：必须放在app/sitemap.xml/route.ts，这是Next.js App Router的特殊路由规则，直接对应sitemap.xml端点。
• 替换map为filter：原代码用map筛选条目属于逻辑错误，map用于转换数组元素，filter才是筛选符合条件的元素。
• 使用rootUrl而非URL：原代码错误引用全局URL对象，应使用自定义的rootUrl变量。
• 生成XML格式：手动组装符合站点地图标准的XML字符串，也可使用xmlbuilder2等第三方库简化生成，手动方式更轻量。
• 设置响应头：必须返回Content-Type: application/xml，否则浏览器会将内容识别为普通文本。
• API调用路径修正：调用内部API时需拼接完整rootUrl，避免axios将相对路径误解析为当前域名请求。

4. 验证效果

启动Next.js项目后，访问http://localhost:3000/sitemap.xml，应能看到标准XML格式的站点地图，不再出现404错误。

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