Vercel deployment of Next.js app with custom 'rewrites' in vercel.json results in 404 errors on all routes

I have a monorepo project with a Flask backend (deployed separately) and a Next.js frontend located in a frontend directory. I'm trying to deploy only the frontend on Vercel.

Project Structure:

text
root/
├── api/                    # Flask backend (deployed on Render)
├── frontend/              # Next.js frontend (deploying to Vercel)
│   ├── package.json
│   ├── app/
│   │   └── page.tsx       # Main page component
│   └── components/
└── vercel.json            # Configuration file

Current vercel.json Configuration:

json
{
  "version": 2,
  "builds": [
    {
      "src": "frontend/package.json",
      "use": "@vercel/next"
    }
  ],
  "rewrites": [
    { "source": "/(.*)", "destination": "/" }
  ]
}

Issue:

After deployment, all routes  root  return a 404 Not Found error. This includes routes like:

/search → 404 Error

/favorites → 404 Error

/books/harry-potter → 404 Error

Expected Behavior:

I expect the rewrites configuration to redirect all routes to the Next.js app's index file, allowing client-side routing to handle the URLs properly.

What I've Verified:

✅ The Next.js app works perfectly locally (npm run dev and npm run build && npm start)

✅ Vercel build completes successfully without errors

✅ Environment variables are set correctly in Vercel (including NEXT_PUBLIC_API_URL)

✅ The package.json in frontend/ has correct build scripts:

json
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

✅ Vercel project settings have Root Directory set to frontend

✅ The main page exists at frontend/app/page.tsx (using App Router)

Error Details:

The browser shows a standard Vercel 404 page with error code NOT_FOUND and an error ID when accessing any non-root URL directly or refreshing the page.

Questions:

1. What is causing these 404 errors for all routes other than / when deploying Next.js to Vercel?

2. How should I configure vercel.json for a monorepo structure with the frontend in a subdirectory?

3. Are there any specific requirements for Next.js App Router vs Pages Router when deploying to Vercel?

4. Is there a better approach to handle client-side routing in this deployment scenario?

Additional Context:

Using Next.js 15.5.0

Backend API is deployed separately on Render

Need to maintain the monorepo structure for development workflow

Local development works flawlessly with the same codebase

Any help would be greatly appreciated! I've been struggling with this for hours and can't figure out why the rewrites aren't working as expected.