nextjs - 💡(How to fix) Fix App Router API routes hang indefinitely on Vercel — Next.js 16.1.6, monorepo [1 comments, 2 participants]

Description

All App Router API routes (route handlers) hang indefinitely on Vercel, returning - status in runtime logs and eventually 504 Gateway Timeout. SSR/SSG pages work perfectly (200). This has been the case since the project was created — API routes have never worked.

Environment

• Next.js: 16.1.6
• Framework: App Router (no Pages Router)
• Bundler: Turbopack (default) — also tested with webpack (--webpack), same result
• Hosting: Vercel Pro plan
• Node.js: Tested both 20.x and 24.x — same result
• Monorepo: pnpm 10 workspaces + Turborepo
• Vercel Root Directory: apps/web (subdirectory of monorepo)
• Project ID: prj_m2u41b4wqSnv7A7GbE5J1fxNE6kA

Minimal reproduction

The simplest possible API route hangs:

// apps/web/src/app/api/ping/route.ts
export async function GET() {
  return new Response(JSON.stringify({ pong: true, ts: Date.now() }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

Zero imports, zero external calls, zero dependencies. This route returns - (no status) in Vercel runtime logs and eventually 504s.

What works vs. what doesn't

What we've tested (exhaustive)

We systematically eliminated every possible code-level cause:

1. Deleted proxy.ts entirely (no middleware at all) — still hangs
2. Zero-import API route (/api/ping) — still hangs
3. Node.js 24.x → 20.x — still hangs
4. Turbopack → webpack (next build --webpack) — still hangs
5. Disabled Vercel Deployment Protection — still hangs
6. Approved pnpm native build scripts (pnpm.onlyBuiltDependencies) — still hangs
7. Removed Clerk middleware — still hangs
8. Simplified proxy.ts to bare NextResponse.next() — still hangs

Vercel runtime logs

Production runtime logs show all API routes with - status (no response) or 504:

| Time     | Method | Path              | Status |
|----------|--------|-------------------|--------|
| 00:40:10 | GET    | /api/ping         | -      |
| 00:36:51 | GET    | /api/ping         | 404    |  ← old deployment (route didn't exist yet)
| 21:32:55 | GET    | /api/health       | -      |
| 21:30:25 | GET    | /api/podcast/feed | -      |
| 21:25:48 | GET    | /api/podcast/feed | 504    | error: Unhandled Rejection
| 21:26:24 | GET    | /api/inngest      | 504    | error

Meanwhile, all page routes return 200 on the same deployment.

Build output

The build succeeds and shows API routes as ƒ (dynamic serverless functions):

@tee/web:build: ├ ƒ /api/health
@tee/web:build: ├ ƒ /api/ping
@tee/web:build: ├ ƒ /api/podcast/feed
@tee/web:build: ├ ƒ /api/inngest

Functions are compiled but never execute successfully at runtime.

Monorepo structure

tee-monorepo/
├── apps/
│   └── web/          ← Vercel Root Directory
│       └── src/
│           └── app/
│               └── api/
│                   ├── ping/route.ts     ← zero-import test
│                   ├── health/route.ts
│                   └── podcast/feed/route.ts
├── packages/         ← shared packages
├── package.json      ← workspaces root
└── turbo.json

Hypothesis

The issue may be related to how Vercel deploys serverless functions from a monorepo subdirectory with Next.js 16. Since pages (SSR) work but API routes (serverless functions) don't, the function invocation path appears broken. The functions are created during build but fail during runtime initialization before any user code executes.

Related

• PR investigation: https://github.com/JMill/tee-site/pull/537 (14 diagnostic commits testing every hypothesis)