Next.js动态路由在Vercel生产环境部署出现404问题求助

将Next.js应用部署到Vercel生产环境后，除动态路由的SSR页面外，其余页面均可正常加载，本地执行npm run dev时应用运行完全正常，需排查解决方案。

详细信息 #

• Next.js版本：15.0.4
• 出现问题的路由：../src/app/battles/[id]/page.tsx
• Vercel生产环境路由URL：https://<your-project>.vercel.app/battles/[id]
• 组件代码：

import React from "react";
import { notFound } from "next/navigation"; // For 404 handling
import HeroSection from "./heroSection";
import AiAnalysis from "./aiAnalysis";
import UsersDiscussion from "./usersDiscussion";
import { getBaseUrl } from "@/src/lib/utils/getBaseUrl";

interface PageProps {
  params: Promise<{ id: string }>;
}

export const dynamicParams = true

async function getBattleByName(name: string) {
    const baseUrl = getBaseUrl();
    const res = await fetch(`${baseUrl}/api/battles/${name}`, {
        cache: 'no-store',
    });
    if (!res.ok) {
        return null;
    }
    const data = await res.json();
    return data.results && data.results.length > 0 ? data.results[0] : null;
}

export async function generateStaticParams() {
  const baseUrl = getBaseUrl();
  try {
    const res = await fetch(`${baseUrl}/api/battles`, { cache: "no-store" });
    if (!res.ok) return [];

    const data = await res.json();
    return data.results.map((battle: any) => ({
      id: battle.name,
    }));
  } catch {
    return [];
  }
}

export async function generateMetadata({ params }: PageProps) {
  const { id } = await params;
  const battle = await getBattleByName(id);

  if (!battle) return { title: "Battle not found" };
  return { title: `${battle.name} | What-If Battles` };
}

async function BattleDetail({ params }: PageProps) {
    let resolvedParams = await params;
    // const id = decodeURIComponent(resolvedParams.id);
    // if (!id) {
    //  notFound();
    // }
    // const battle = await getBattleByName(id);
    const { id } = await params; // ✅ don't decode
    const battle = await getBattleByName(id);
    if (!battle) {
        notFound();
    }
    return (
        <div>
            <HeroSection title={battle.name} teamA={battle.team_a} teamB={battle.team_b}></HeroSection>
            <AiAnalysis analysisHTML={battle.ai_analysis}></AiAnalysis>
            <UsersDiscussion battleId={battle.id}></UsersDiscussion>
        </div>
    );
}

export default BattleDetail;

• app目录下battles文件夹结构：app/battles目录下包含[id]子文件夹，子文件夹内有page.tsx、heroSection.tsx、aiAnalysis.tsx、usersDiscussion.tsx文件
• Google开发者工具异常：页面呈现404状态，对应API请求返回失败

已尝试的排查方向 #

• 检查vercel.json配置：项目中无该文件
• 使用generateStaticParams()在构建时生成页面：已添加但未解决问题
• 降级Next.js版本：从最新版降至15.0.4
• 确认Vercel框架预设为Next.js：已设置
• 检查是否存在两个api文件夹：项目中无此情况

若需更多信息请告知，希望能解决该问题。

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