Common Next.js Mistakes: One unhandled fetch error blanked the entire
One unhandled fetch error blanked the entire page. Root cause: An uncaught Server Component error unmounted the tree. The fix: Add `error.tsx` per segment for scoped recovery.
A production war story from the TheCodeForge Next.js series — the incident, why it happened, and the exact fix.
⏳ Timestamps:
0:00 - Cold open: API costs tripled from $200 to $600/month
0:14 - Version Compatibility: fetch() Defaults
0:58 - Production Caveat: ISR and fetch() Caching
1:26 - Intro
1:36 - What Is Fetch Caching?
2:02 - Mistake 1: No Cache Directive
2:29 - Correct: Explicit Cache
2:44 - Mistake 2: Non-Serializable Props
3:14 - Correct: Server Action
3:27 - Mistake 3: Missing 'use server'
3:53 - Correct: Directive First
4:04 - Mistake 4: Wrong Router Import
4:28 - Correct: next/navigation Import
4:37 - Mistake 5: Layout useEffect Once
5:06 - Correct: Pathname Dependency
5:20 - Mistake 6: Browser APIs in Server
5:44 - Correct: Client Component
5:57 - Mistake 7: next/image Without Size
6:26 - Correct: Fill with Parent
6:40 - Mistake 8: Middleware on Assets
7:11 - Correct: Matcher Excludes Assets
7:26 - Mistake 9: No Suspense Boundaries
7:53 - Correct: Suspense Boundaries
8:08 - Mistake 10: params as Promise
8:32 - Correct: Await params
8:41 - API costs tripled from $200 to $600/month
9:06 - fetch() caching default changed
9:16 - The Fix: Explicit Cache Directive
9:38 - ⚠ Gotcha: No cache directive on fetch()
9:52 - ⚠ Gotcha: No cache directive on fetch()
10:05 - ⚠ Gotcha: Passing Date object to Client Component
10:22 - Debugging Guide
10:37 - Interview Questions
10:59 - FAQ
11:24 - Key Takeaways
11:39 - Next up
12:03 - Wrap-up
👉 Full article + code: https://thecodeforge.io/javascript/co...
⏭ Next up: Supabase Auth with Next.js 16
#nextjs #javascript