Next.js: Kapan Worth It, Kapan Overkill

Next.js: Kapan Worth It, Kapan Overkill (Pengalaman Setelah Build Beberapa Project)

Gue inget pertama kali cobain Next.js. Directly dari React + Vite, gue langsung "wah, ini ngerasa lebih proper." Server components, file-based routing, image optimization - semua out of the box. Tapi setelah build 3 project pake Next.js, gue sadar: bukan semua project cocok pake Next.js. Dan blog ini justru gue pake React + Vite, bukan Next.js.

Kenapa? Itu yang gue mau bahas. Bukan review marketing - tapi pengalaman pake, kapan Next.js nyelamatin hidup gue, dan kapan bikin gue wasted waktu.

---

Apa yang Next.js Bikin Gampang

1. Routing gak perlu setup.

Di React + Vite, lo must install react-router, konfigurasi routes, setup layout, handle nested routes. Di Next.js? Bikin folder app/blog/[slug]/page.jsx - jadi. URL otomatis /blog/slug-lo. File-based routing ini bikin lo fokus nulis kode, bukan konfigurasi.

2. SEO jadi natural.

Ini alasan terbesar orang pindah ke Next.js. React SPA biasa itu client-side rendering - Google bot lihat halaman kosong, baru JS load, baru konten muncul. Next.js pake Server-Side Rendering (SSR) atau Static Site Generation (SSG). Bot langsung lihat HTML lengkap dengan konten.

Buat blog kayak ini, SEO itu everything. SSR = artikel lo ter-index lebih cepat di Google.

3. Image optimization built-in.

component Next.js otomatis bikin responsive images - WebP, lazy loading, ukuran berbeda untuk screen berbeda. Gue pernah coba implementasi ini manual di Vite pake srcset + sharp. 2 hari kerja. Next.js? Satu prop: priority atau gak. Done.

4. API routes di satu tempat.

Lo gak perlu deploy backend terpisah buat API simpel. Bikin file api/route.js di dalam project Next.js, jadi endpoint. Buat MVP atau SaaS kecil, ini ngurangin complexity deployment.

5. Vercel deployment = 1 klik.

Push ke GitHub, Vercel auto-deploy, CDN global, SSL gratis, analytics built-in. Gak perlu setup Docker, nginx, SSL certificate manual. Buat indie hacker, ini cicilan mental berkurang banget.

---

Tapi Next.js Punya Kekurangan yang Gak Dibahas di Landing Page

1. Learning curve lebih curam dari yang lo kira.

Next.js 14+ itu bukan React biasa. Lo harus paham:
• Server Components vs Client Components (kapan pake "use client")
• Server Actions
• Caching behavior (ini yang paling bikin gue pusing)
• App Router vs Pages Router (masih ada yang pake lama)

Gue pernah wasted 4 jam debug kenapa useState gak jalan - ternyata lupa kasih "use client" di atas file. Hal sepele, tapi kalau lo baru pindah dari Vite, ini bikin frustasi.

2. Caching bisa bikin gila.

Next.js aggressive banget soal caching. Lo update data, refresh halaman, tapi yang muncul data lama. Kenapa? Karena Next.js cache fetch results by default. Lo harus paham revalidate, no-store, dynamic = 'force-dynamic', dan kapan pake yang mana.

Buat blog statis, caching itu bagus. Buat aplikasi yang datanya berubah real-time (dashboard, chat, analytics), caching default Next.js jadi musuh, bukan teman.

3. Vendor lock-in ke Vercel.

Next.js open-source, tapi fitur-fitur tertentu (Image Optimization, Edge Functions, ISR) dioptimalkan buat Vercel. Lo bisa self-host pake Docker, tapi beberapa fitur gak jalan sempurna atau butuh konfigurasi tambahan.

Kalau lo deploy ke Vercel, semua enak. Kalau mau pindah ke server sendiri atau platform lain, ada effort migrasi yang gak kecil.

4. Bundle size lebih gede.

Next.js bawa framework code yang gak kecil. Buat blog simpel kayak MSNCode, React + Vite menghasilkan bundle lebih kecil. Next.js nambah overhead yang buat project kecil jadi overkill.

5. Over-engineering buat project simpel.

Blog ini pake React + Vite + Supabase Edge Functions. Kenapa gak Next.js? Karena:
• Blog ini gak butuh SSR (SEO di-handle pake tag meta dinamis + sitemap yang di-generate di Edge Function)
• Routing cuma butuh react-router (15 pages)
• Tidak ada image processing heavy
• Deployment lebih simpel: Vite build → Vercel static hosting

Next.js untuk blog ini kayak pake truk buat beli semangka. Bisa, tapi mubazir.

---

Kapan Lo WAJIB Pake Next.js

1. SaaS atau e-commerce yang butuh SEO.

Marketplace, toko online, direktori - semua butuh halaman yang ter-index Google. SSR Next.js bikin produk lo muncul di search result.

2. Aplikasi dengan banyak halaman dinamis.

Dashboard, admin panel, CMS, platform multi-user. Routing Next.js bikin struktur project bersih.

3. Lo butuh API + frontend di satu repo.

Indie hacker yang mau ship cepet: Next.js API routes = gak perlu deploy backend terpisah buat endpoint simpel.

4. Lo udah familiar sama React.

Kalau lo React developer, Next.js adalah progression yang natural. Tapi pelajari dulu konsep Server Components - jangan asumsi sama kayak React biasa.

---

Kapan Lo JANGAN Pake Next.js

1. Blog statis atau landing page simpel.

Vite + React, atau bahkan Astro, lebih ringan dan lebih cepat. Kalau konten gak berubah real-time, gak butuh SSR.

2. Aplikasi real-time (chat, live dashboard).

Caching Next.js malah bikin masalah. Lo bakal spend waktu fight cache daripada nulis fitur. Buat ini, React + Vite + WebSocket lebih straightforward.

3. Lo baru belajar React.

Next.js bikin konsep React jadi rumit karena nambah layer abstraction. Belajar React fundamental dulu, baru Next.js.

4. Lo butuh full control atas server.

Kalau lo butuh custom nginx config, WebSocket persistent, atau background jobs, Next.js + Vercel terlalu opinionated. Pakai Express/FastAPI + React SPA.

5. Tim lo gak familiar sama React.

Kalau tim lo Vue, Svelte, atau Laravel, Next.js bukan jawaban. Jangan maksa stack cuma karena hype. Pakai yang tim lo kuasai.

---

Perbandingan Cepat

| Kriteria | Next.js | React + Vite |
|---|---|---|
| SEO | ✅ SSR/SSG built-in | ⚠ Butuh setup manual (meta tags, sitemap) |
| Routing | ✅ File-based, otomatis | ⚠ Manual pake react-router |
| Bundle size | ⚠ Lebih gede | ✅ Lebih kecil |
| Caching | ✅ Buat konten statis | ✅ Lo control sendiri |
| Learning curve | ⚠ Curam (Server Components, caching) | ✅ Flat, familiar |
| Deployment | ✅ Vercel 1-klik | ✅ Static hosting mana aja |
| Real-time app | ❌ Cache bikin susah | ✅ Lebih straightforward |
| Image optimization | ✅ Built-in | ⚠ Manual |
| Best for | SaaS, e-commerce, dashboard | Blog, landing page, SPA |

---

Penutup yang Jujur

Next.js itu tools canggih. Tapi tools canggih bukan berarti cocok buat semua project. Gue pake Next.js buat SaaS yang butuh SEO + API routes. Gue pake Vite buat blog ini. Gue pake Express + React buat dashboard real-time.

Pilih stack berdasarkan kebutuhan project, bukan berdasarkan what's trending di Twitter.

Kalau lo masih ragu: mulai dari Vite. Kalau nanti lo butuh SSR atau SEO yang lebih serious, migrasi ke Next.js gak terlalu susah. Tapi kalau lo mulai dari Next.js dan ternyata overkill, migrasi balik jauh lebih ribut.