More Menu
Reading ListGanti TemaSearch
Reading List

Queue · 0 items

Your reading list is empty. Save articles to read them later.

Start Reading

Fix Next.js 16 Compile Stuck on Turbopack Dev Server

Iwan Efendi3 min

How I debugged and fixed the Next.js 16 Turbopack dev server that kept crashing at 'Compiling /[locale]' after migrating to Tailwind CSS v4.

Artikel ini tersedia dalam Bahasa IndonesiaBaca dalam ID →
Baca dalam IDID
After successfully migrating SnipGeek from Tailwind CSS v3.4.1 to v4 and Next.js 15 to 16, I hit a frustrating wall: the dev server kept dying silently at ○ Compiling /[locale] ... with exit code 1. No error message. No stack trace. Just... dead. This note documents the full debugging journey—every wrong turn and the final fix—so you don't have to waste hours on the same problem.

The Symptom

Every time I ran npm run dev, the Turbopack server would start fine:
 Next.js 16.1.6 (Turbopack)
- Local: http://localhost:9003

 Starting...
 Ready in 1552ms
 Compiling /[locale] ...
# ← process dies here, exit code 1
No compilation error. No helpful log. The process simply vanished.

The Wrong Turns

Before finding the root cause, I went through several failed attempts that are worth documenting.

Attempt 1: Restarting the Server

The most obvious first step. Kill the process, restart. Same result every time—stuck at the same point.

Attempt 2: Checking Port Conflicts

I suspected port 9003 was already in use:
netstat -ano | findstr :9003
Sometimes it was, sometimes it wasn't. Killing the orphan process and restarting didn't help. The server would start, then crash again at compilation.

Attempt 3: Reverting Git Commits

I even rolled back to an older commit (c640944 — the pre-migration backup) to rule out code changes. The older Tailwind v3 codebase had its own issues with the newer dependencies, so this wasn't a viable path either.
Don't Panic-Revert
Rolling back multiple commits without understanding the root cause can create more problems than it solves. Always diagnose first.

Finding the Root Cause

The breakthrough came when I took a more systematic approach:
1
Cleared the .next cache completely.
Remove-Item -Recurse -Force .next
Stale Turbopack cache from the migration could have been causing compilation to choke.
2
Increased Node.js memory allocation.The /[locale] route in SnipGeek is heavy—it imports Firebase, Radix UI, Framer Motion, Recharts, and many other dependencies. The default Node.js heap size (~1.7 GB) was not enough for Turbopack to compile everything.
$env:NODE_OPTIONS="--max-old-space-size=4096"
npx next dev --turbopack -p 9003
3
Fixed the proxy export name.Next.js 16 renamed middleware to proxy. The file was already renamed to src/proxy.ts, but the exported function was still called middleware:
// ❌ Before (crashes silently)
export function middleware(request: NextRequest) { ... }

// ✅ After
export function proxy(request: NextRequest) { ... }
After all three fixes, the server compiled successfully:
 Ready in 2.3s
 Compiling /[locale] ...
 GET / 200 in 9.2s (compile: 7.8s, proxy.ts: 82ms, render: 1249ms)
The compilation took 7.8 seconds—which is why it appeared to be stuck. It was actually working, but running out of memory before it could finish. For more details on resolving silent failures, check out How to Fix AI Build Failed Logs to improve your workflow when local compiler pipelines break. If your server compiles successfully but page loading still stutters, How to Optimize Next.js Image Scrolling for Better UX offers advice on tuning CSS render parameters.

The Permanent Fix

I updated the dev script in package.json to always allocate sufficient memory:
{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 next dev --turbopack -p 9003"
  }
}

Why This Happened

Three factors combined to create the silent crash:
FactorDetail
Turbopack + large routeThe /[locale] layout imports 15+ heavy packages (Firebase, Radix UI, Framer Motion, etc.)
Default memory limitNode.js defaults to ~1.7 GB heap, insufficient for bundling all dependencies
Silent OOMTurbopack doesn't surface out-of-memory errors clearly—the process just exits with code 1
Quick Diagnostic
If your Next.js 16 dev server dies silently during compilation, the first thing to try is increasing memory: NODE_OPTIONS=--max-old-space-size=4096. This alone solves many Turbopack compilation crashes.

Key Takeaways

  1. Silent exit code 1 during Turbopack compilation is often an OOM issue. Always check memory allocation first.
  2. Clear .next cache after major migrations. Stale cache can cause unpredictable compilation failures.
  3. Next.js 16 requires proxy export, not middleware. The error message for this is clear, but it can get buried if other issues crash the server first.
  4. Don't panic-revert. Diagnose systematically before rolling back commits.

FAQ

Q: What are the main error signatures of an Out Of Memory (OOM) crash in Turbopack? A: The primary signature is a silent crash with exit code 1 or 137 (SIGKILL) directly after printing ○ Compiling /[locale] ... or during high cpu activity. No exception error output is printed to the terminal because the operating system or Node.js runtime terminates the process immediately before a stack trace can be output. Q: Should I use Turbopack or stick with Webpack for local development? A: Turbopack is highly recommended because it is significantly faster than Webpack (often 5x to 10x faster startup and HMR times in large codebases). However, because Turbopack is written in Rust and runs native compilation, its memory profile can spike higher during initialization. If memory is tight, allocating 4096 using NODE_OPTIONS mitigates this issue completely. Q: How do I completely clear the local Next.js cache when troubleshooting compile loops? A: You must delete the .next directory located at the root of your project. If you are on Linux or macOS, run rm -rf .next. If you are using Windows PowerShell, run Remove-Item -Recurse -Force .next. This forces the compiler to re-fetch and rebuild your entire module dependency graph from scratch. Q: What is the difference between middleware.ts and proxy.ts in Next.js 16? A: Next.js 16 introduces changes to structural layouts. The standard routing interceptor file, previously called middleware.ts at the root, has been restructured under the proxy namespace to handle redirects and headers natively, requiring a named proxy export instead of a middleware default or named export.

References

Topics

Topics in this note

Explore related ideas through the topics connected to this note.

Share this article

Discussion

Preparing the comments area...

You Might Also Like