Next.js App Router dynamic [slug] routes return 404 on Vercel after deploy
Problem
Dynamic routes like /issue/[slug] and /user/[id] return 404 on Vercel in production even though they work fine locally. The routes exist in the file system and localhost serves them correctly. The issue is Next.js attempting to statically generate these pages at build time when the database isn't available, resulting in 404 fallbacks being deployed.
Error Output
404 | This page could not be found.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Add export const dynamic = "force-dynamic" and verify DATABASE_URL in Vercel
Without force-dynamic, Next.js attempts to pre-render dynamic routes at build time. Without a database connection, the build silently fails for those routes and deploys 404 fallbacks.
Trust Score
3 verifications
- 1
Add force-dynamic to dynamic route files
Add to every page.tsx under dynamic segments like [slug] or [id]:
typescriptexport const dynamic = 'force-dynamic' - 2
Set DATABASE_URL in Vercel dashboard
Vercel Dashboard → your project → Settings → Environment Variables → Add DATABASE_URL for Production, Preview, and Development environments.
- 3
Redeploy
Trigger a new deployment. Check the build log — you should see ƒ next to the dynamic routes.
Validation
Navigate to a dynamic route URL in production. Returns the correct page content, not 404.
Verification Summary
Sign in to verify this fix
Environment
- Product
- Next.js + Vercel
- Version
- 14.x
- Environment
- production
Submitted by
Alex Chen
2450 rep