nextjs - 💡(How to fix) Fix Next.js 16 App Router: API routes hang on Vercel (504) while pages work -- both Turbopack and webpack [2 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#91465Fetched 2026-04-08 00:47:00
View on GitHub
Comments
2
Participants
2
Timeline
10
Reactions
0
Author
Timeline (top)
labeled ×5commented ×2closed ×1issue_type_added ×1

Root Cause

The difference between working and broken: the number of routes/source files importing heavy packages. The minimal repro has few routes. The full project has ~70 API routes + ~60 pages. The hang appears to be caused by the serverless function initialization phase (shared chunks or runtime bootstrap), not by route handler code.

Code Example

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

Tested with:
- next build (Turbopack) → hangs
- next build --webpack → hangs
- Deleting proxy.ts entirely → hangs
- Emptying next.config.ts → hangs
- serverExternalPackages for 5+ packages → hangs
- Lazy dynamic import() for all heavy deps → hangs
- Node.js 20.x and 24.x → hangs
- Deployment Protection disabled → hangs
- Fresh Vercel project → hangs

Zero runtime logs appear for API routes — the serverless function code never executes.

### Current vs. Expected behavior

**Current:** All App Router API routes return 504 (gateway timeout). Zero runtime logs —
serverless function code never executes. Even a zero-import `/api/ping` hangs. Pages (SSR) work perfectly.

**Expected:** API routes should execute and return responses, just like they do in the minimal repro and in local development.

**Key evidence this is a platform/framework issue, not application code:**
- The same `/api/ping` with zero imports works in the minimal repro but hangs in the full project
- Pages work fine in the same deployment
- Both Turbopack AND webpack produce the same hang
- Deleting proxy.ts (no middleware at all) still hangs
- Runtime logs show zero entries -- the function is never invoked

The difference between working and broken: the number of routes/source files importing heavy packages. The minimal repro has few routes. The full project has ~70 API routes + ~60 pages. The hang appears to be caused by the serverless function initialization phase (shared chunks or runtime bootstrap), not by route handler code.

### Provide environment information
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/JMill/nextjs16-api-hang-repro

To Reproduce

The minimal repro linked above WORKS. The issue manifests in larger monorepos with ~70+ routes importing heavy packages. I cannot share the full project publicly but can grant Vercel/Next.js team access on request.

Steps:

  1. Clone https://github.com/JMill/nextjs16-api-hang-repro — deploy to Vercel — /api/ping returns 200 ✅
  2. In a real monorepo with ~70 API routes and ~60 pages importing @clerk/nextjs, next-sanity, inngest, stripe, @supabase/supabase-js, etc., deploy to Vercel
  3. Visit any page → 200 in ~0.7s ✅
  4. Hit /api/ping (zero imports, just returns { pong: true }) → hangs forever, 504 ❌

The /api/ping route:

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

Tested with:
- next build (Turbopack) → hangs
- next build --webpack → hangs
- Deleting proxy.ts entirely → hangs
- Emptying next.config.ts → hangs
- serverExternalPackages for 5+ packages → hangs
- Lazy dynamic import() for all heavy deps → hangs
- Node.js 20.x and 24.x → hangs
- Deployment Protection disabled → hangs
- Fresh Vercel project → hangs

Zero runtime logs appear for API routes — the serverless function code never executes.

### Current vs. Expected behavior

**Current:** All App Router API routes return 504 (gateway timeout). Zero runtime logs —
serverless function code never executes. Even a zero-import `/api/ping` hangs. Pages (SSR) work perfectly.

**Expected:** API routes should execute and return responses, just like they do in the minimal repro and in local development.

**Key evidence this is a platform/framework issue, not application code:**
- The same `/api/ping` with zero imports works in the minimal repro but hangs in the full project
- Pages work fine in the same deployment
- Both Turbopack AND webpack produce the same hang
- Deleting proxy.ts (no middleware at all) still hangs
- Runtime logs show zero entries -- the function is never invoked

The difference between working and broken: the number of routes/source files importing heavy packages. The minimal repro has few routes. The full project has ~70 API routes + ~60 pages. The hang appears to be caused by the serverless function initialization phase (shared chunks or runtime bootstrap), not by route handler code.

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
Next.js version: 16.1.6
Node.js version: 20.x (also tested 24.x)
Package manager: pnpm 10.29.3
Monorepo: Turborepo with pnpm workspaces

Which area(s) are affected? (Select all that apply)

Middleware, Dynamic Routes, Route Handlers, Pages Router

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed), next build (local)

Additional context

Vercel deployment IDs for inspection:

  • Webpack build: dpl_4qYgiuXHNKUoJFSSjAr3sN1ow4Yg (team: wfs, project: tee-site)
  • Turbopack build: dpl_GwK4LJrwynpThNd8yhgPQ68UPYs7
  • Production: dpl_71x82AxEVYsNBXMZQ9EENGV77sxj

Working minimal repro deployment: https://nextjs16-api-hang-repro-web.vercel.app/api/ping

Broken deployment (pages work, API hangs): https://tee-site-c6rn9ggr3-wfs.vercel.app/api/ping

Project structure: pnpm monorepo, Root Directory set to apps/web in Vercel. ~70 API routes, ~60 pages. Heavy deps: @clerk/nextjs, next-sanity, inngest, stripe, @supabase/supabase-js, @anthropic-ai/sdk.

Previous issues closed without resolution:

Full investigation: https://github.com/JMill/tee-site/blob/main/docs/api-routes-investigation.md (Private repo -- happy to grant access on request)

This is reproducible on every deployment and has been since the project was created. It is NOT intermittent.

I also have a Vercel support ticket open for this. Happy to grant repo access to the Next.js team for debugging.

extent analysis

Fix Plan

To address the issue of API routes hanging in a Next.js project with a large number of routes and heavy dependencies, we'll focus on optimizing the serverless function initialization phase.

  1. Optimize Dependencies:

    • Review and minimize the use of heavy dependencies in API routes.
    • Consider lazy loading or dynamic imports for dependencies that are not critical for every route.
  2. Serverless Function Configuration:

    • Ensure that the serverComponents option in next.config.js is set to true to enable server components.
    • Experiment with setting concurrentFeatures to false in next.config.js to see if it improves performance.
  3. Route Segmentation:

    • If possible, segment your API routes into smaller groups and deploy them as separate serverless functions to reduce the initialization overhead.
  4. Vercel Configuration:

    • Check Vercel's documentation for any specific configurations or optimizations for large Next.js projects.
    • Consider reaching out to Vercel support for personalized guidance, given the complexity of your project.

Example Code

For dynamic imports, you can use a pattern like this:

export async function GET() {
  const { default: heavyDependency } = await import('heavy-dependency');
  // Use heavyDependency
  return new Response(JSON.stringify({ message: 'Hello World' }), {
    status: 200,
    headers: { "Content-Type": "application/json" },
  });
}

Verification

  • Deploy the changes to Vercel and test API routes for responsiveness.
  • Monitor the performance and logs to ensure that the serverless function code is executing as expected.

Extra Tips

  • Regularly review and optimize dependencies to prevent similar issues in the future.
  • Consider implementing a CI/CD pipeline that includes performance tests to catch potential issues before deployment.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix Next.js 16 App Router: API routes hang on Vercel (504) while pages work -- both Turbopack and webpack [2 comments, 2 participants]