Next.js 13中带文件扩展名的动态路由创建问题（站点地图示例）

文件结构 #

在App Router的app目录下创建如下结构：

app/
└── sitemap-[page].xml/
    └── route.js

这里的[page]是动态参数，对应URL中sitemap-和.xml之间的部分（例如访问sitemap-posts.xml时，page参数值为posts）。

编写 route.js 逻辑 #

在route.js中处理动态参数并生成对应XML内容：

// 可选：导入MetadataRoute类型做类型提示
import { MetadataRoute } from 'next';

// 预生成所有需要的静态站点地图（适用于SSG场景，可选）
export async function generateStaticParams() {
  return [
    { page: 'posts' },
    { page: 'pages' },
    { page: 'products' },
  ];
}

export async function GET(_, { params }) {
  const { page } = params;

  // 根据page参数获取对应URL列表，替换为你的实际数据逻辑
  const urls = await fetchTargetUrls(page);

  // 构造站点地图XML内容
  const sitemapXml = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${urls.map(({ url, lastModified }) => `
    <url>
      <loc>${url}</loc>
      <lastmod>${new Date(lastModified).toISOString()}</lastmod>
    </url>
  `).join('')}
</urlset>`;

  // 返回XML格式响应
  return new Response(sitemapXml, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}

// 示例函数：根据page参数获取对应页面URL（替换为你的实际业务逻辑）
async function fetchTargetUrls(page) {
  switch(page) {
    case 'posts':
      return [
        { url: 'https://your-domain.com/posts/hello-world', lastModified: new Date() },
        { url: 'https://your-domain.com/posts/nextjs-13-guide', lastModified: new Date() },
      ];
    case 'pages':
      return [
        { url: 'https://your-domain.com/about', lastModified: new Date() },
        { url: 'https://your-domain.com/contact', lastModified: new Date() },
      ];
    default:
      return [];
  }
}

核心要点 #

• 动态参数page会自动从URL中提取，无需额外路由配置。
• generateStaticParams用于预先生成静态站点地图，适合内容固定的场景；若需实时生成（比如从数据库拉取最新数据），可直接移除该函数，Next.js会按需处理请求。
• 必须设置响应头Content-Type: application/xml，确保搜索引擎和浏览器正确识别文件类型。

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