Failed to compile. app/blog/[slug]/page.tsx Type error: Type 'PageProps' does not satisfy the constraint 'import("/vercel/path0/.next/types/app/blog/[slug]/page").PageProps'. Types of property 'params' are incompatible. Type '{ slug: string; }' is missing the following properties from type 'Promise': then, catch, finally, [Symbol.toStringTag] Error: Command "npm run build" exited with 1

I'm working on a Next.js 15 app with App Router, and everything works fine on localhost. However, after deploying to Vercel (or when running npm run build), I get routing issues.

I have the following structure:

• app/blog/page.tsx: Displays a list of articles, fetching data from /blog/data.json.
• app/blog/[slug]/page.tsx: Displays the article details based on slug.

When running locally, localhost:3000/blog works correctly, and localhost:3000/blog/my-article shows the correct details. However, after deployment, navigating directly to /blog/my-article results in a 404 error.

app/blog/[slug]/page.tsx
import data from "@/public/blog/data.json";
import { generateSlug } from "@/app/utils/blogHelper";

export default async function BlogDetail({ params }: { params: { slug: string } }) {
  const article = data.articles.find((article) => generateSlug(article.title) === params.slug);

  if (!article) return notFound();

  return (
    <div className="container mx-auto py-10 px-4">
      <h1 className="text-3xl font-bold">{article.title}</h1>
      <p>{article.published_date} | {article.author}</p>
      <Image src={article.thumbnail} alt={article.title} width={800} height={500} />
      <p className="text-lg">{article.description}</p>
    </div>
  );
}

// vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}