Next.js13部署Vercel后rss.xml带_rsc参数请求报404错误

问题背景 #

使用Next.js 13 App Router，在app/rss.xml/route.tsx中生成RSS XML内容，本地及部署到Vercel后，直接访问https://www.domain.xx/rss.xml正常，但部署后控制台出现GET https://www.domain.xx/rss.xml?_rsc=1ag7k 404 (Not Found)错误，导致Lighthouse最佳实践项提示“控制台记录了浏览器错误”。

目录结构：

app
├─layout.tsx
├─page.tsx
├─rss.xml
|    └route.tsx

原路由代码：

import RSS from 'rss'
import getPostMetadata from '@/lib/getPostMetadata'

export async function GET() {
  const articles = getPostMetadata();
  const SITE_URL = "https://www.domain.xx";

  const feed = new RSS({
    title: 'xxx',
    description: 'xxx',
    site_url: SITE_URL,
    feed_url: `${SITE_URL}/rss.xml`,
    language: 'zh-cn',
  })

  articles.forEach((article) => {
    feed.item({
      title: article.title,
      description: article.description,
      date: article.date,
      url: `${SITE_URL}/blog/${article.slug}`,
      guid: `${SITE_URL}/blog/${article.slug}`,
    });
  });

  return new Response(feed.xml(), {
    headers: {
      "Content-Type": "application/xml",
    },
  });
}

依赖版本：

{
  "rss": "^1.2.2",
  "next": "13.4.10"
}

原因分析 #

_rsc参数是Next.js React Server Components（RSC）的请求标识，浏览器可能误将rss.xml当作RSC页面发起带该参数的请求，而默认的路由匹配逻辑未处理带参数的rss.xml请求，导致404错误。

解决方案 #

方案1：路由中忽略_rsc参数 #

修改route.tsx中的GET函数，接收请求对象但不处理_rsc参数，直接返回RSS内容，让路由兼容带参数的请求：

import RSS from 'rss'
import getPostMetadata from '@/lib/getPostMetadata'

export async function GET(request: Request) {
  // 无需处理_rsc参数，正常生成RSS内容
  const articles = getPostMetadata();
  const SITE_URL = "https://www.domain.xx";

  const feed = new RSS({
    title: 'xxx',
    description: 'xxx',
    site_url: SITE_URL,
    feed_url: `${SITE_URL}/rss.xml`,
    language: 'zh-cn',
  })

  articles.forEach((article) => {
    feed.item({
      title: article.title,
      description: article.description,
      date: article.date,
      url: `${SITE_URL}/blog/${article.slug}`,
      guid: `${SITE_URL}/blog/${article.slug}`,
    });
  });

  return new Response(feed.xml(), {
    headers: {
      "Content-Type": "application/xml",
      // 可选：添加缓存头优化性能
      "Cache-Control": "s-maxage=86400, stale-while-revalidate",
    },
  });
}

方案2：通过Next.js重写规则匹配带参数的请求 #

在next.config.js中添加重写规则，将带_rsc参数的rss.xml请求重写到原路由：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/rss.xml',
        destination: '/rss.xml',
        has: [
          {
            type: 'query',
            key: '_rsc',
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

或者更通用的规则，匹配所有带参数的rss.xml请求：

async rewrites() {
  return [
    {
      source: '/rss.xml:path*',
      destination: '/rss.xml',
    },
  ];
}

验证步骤 #

1. 部署修改后的代码到Vercel
2. 访问网站，打开浏览器控制台查看是否还有404错误
3. 运行Lighthouse audit，确认“控制台记录了浏览器错误”的提示消失

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