I’ve shipped 5 production-grade React apps—some successful, some dumpster fires. I’ve seen Next.js at its best (blazing-fast SSR) and its worst (debugging getServerSideProps at 3 AM).
Most tutorials? Useless. They show the happy path, not the landmines. So here’s the real guide—the one I wish I had.
What Actually Works (And What Will Waste Your Time)
1. Next.js Routing Is a Silent Killer
"The more ‘magic’ your framework has, the harder it backstabs you."
✅ Do this:
- Isolate route handlers in
/lib/routing—never let them spread.
- Use middleware sparingly (it’s easy to overcomplicate).
❌ Avoid this:
- Sticking
getStaticPaths logic inside page files (you’ll regret it).
- Assuming
rewrites and redirects are "simple" (they’re not).
2. Server Components Are Overhyped (For Now)
"Just because you can move everything to the server doesn’t mean you should."
✅ Do this:
- Use them only for truly static content (blog posts, marketing pages).
- Measure first—compare SSR vs. client-side hydration performance.
❌ Avoid this:
- Rewriting working client components just to chase trends.
- Assuming RSCs fix all your data-fetching problems (they don’t).
3. Data Fetching Will Test Your Sanity
"Cache invalidation is still one of computing’s hardest problems—Next.js won’t save you."
✅ Do this:
- Pick one fetching strategy per project (SWR, React Query, or bare
fetch).
- Cache aggressively—Vercel’s edge cache is your best friend.
❌ Avoid this:
- Mixing
getServerSideProps, getStaticProps, and API routes (pick one!).
- Ignoring
revalidate until your CDN bills explode.
Want the Full Guide?
This is just 10% of what I’ve learned. The full Next.js Anti-Frustration Playbook (with code samples, debugging tricks, and architecture templates) will be uploaded soon free on:
CoreCraft Substack
No fluff. No "just use AI" nonsense. Just real fixes from real projects.
P.S. If you’re tired of shallow tech takes, I write hard-won engineering lessons every week. No hype—just stuff that works.