AI & Agent Dev Bug Sandbox logo
AI & Agent Dev Bug Sandbox
Back to Radar

App Router Root Route Server-Side UsePathname Returns "/Index" On Vercel Causing Hydration Mismatch

On Vercel deployments, the root route's server-side usePathname() returns "/index" instead of "/", leading to React hydration error #418 and missing SSR output for client components that branch on pathname === "/".

highConfidence 75%Next.jsAffected V16.2.9

Origin Analysis

During static generation of the root route, the canonical pathname used in the RSC Flight payload is derived from the prerender filename `.next/server/app/index.html`, producing `/index` instead of the normalized `/`. Local `next start` normalizes this at serve time, but Vercel serves the static file directly, exposing the unnormalized path.
1. Deploy a minimal App Router app with a root layout, route group, and a client component in the group layout that returns early if usePathname() !== '/'. 2. Build locally (`next build && next start`) and curl the root route: payload shows `"c":["",""]` and component renders. 3. Deploy the same commit to Vercel. 4. Curl the deployment root: payload shows `"c":["","index"]` and component is missing from SSR; browser logs hydration error #418.

Fixing Code Block

Edge Case Audit

This change is safe for the current routing semantics because `/index` is not a routable page in App Router; it always normalizes to the root route. However, if a future version introduces distinct `/index` handling, this normalization could hide a legitimate route. Rollback is straightforward: revert the patch. The fix only affects static root path generation; dynamic routes and non-root paths remain unchanged.

Ecosystem Topology