Next.js vs React Polos

Analogi: kontrakan kosongan vs apartemen furnished

Bayangkan kamu butuh tempat tinggal. React polos (dengan Vite) itu seperti mengontrak rumah kosongan: kamu bebas menata semuanya, biaya awalnya ringan, tapi kamu yang harus beli kompor sendiri, pasang tabung gas sendiri, dan urus semuanya dari nol. Cocok kalau kamu jarang masak dan cuma butuh tempat tidur.

Next.js itu seperti menyewa apartemen fully furnished: kompor, kulkas, dan microwave sudah tersedia, tinggal pakai. Biaya awalnya sedikit lebih besar dan ada aturan gedung yang harus diikuti, tapi kalau kamu memang berencana masak setiap hari (baca: butuh SEO, butuh halaman publik yang cepat), semuanya sudah siap.

Tidak ada yang lebih baik secara mutlak. Yang ada hanya: cocok atau tidak cocok dengan kebutuhanmu.

Kenapa perbandingan ini penting?

Salah pilih stack itu mahal, bukan dalam uang, tapi dalam waktu dan tenaga. Pilih Next.js untuk dashboard admin internal yang tidak butuh SEO: kamu membayar harga berupa setup server, build yang lebih lama, dan konsep server/client yang harus dipelajari, untuk keuntungan yang tidak pernah kamu pakai. Sebaliknya, pilih React polos untuk blog yang ingin ranking di Google: kamu hemat di awal, lalu berdarah-darah kemudian mengejar SEO yang memang bukan kekuatan CSR.

Modul ini memberimu kacamata untuk memutuskan dengan sadar, bukan ikut-ikutan hype.

Perbandingan cepat

Contoh 1: routing, daftar manual vs cukup bikin file

Di React + Vite, setiap route harus didaftarkan manual lewat library seperti react-router:

// src/App.tsx (React + Vite, pakai react-router)
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from "./pages/Home";
import Tentang from "./pages/Tentang";

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/tentang", element: <Tentang /> },
]);

export default function App() {
  return <RouterProvider router={router} />;
}

Perhatikan bebannya: install library tambahan, import satu per satu, daftarkan path satu per satu. Lupa mendaftarkan satu halaman berarti halaman itu tidak bisa diakses, tanpa ada yang mengingatkan.

Di Next.js, tidak ada langkah itu sama sekali:

// app/tentang/page.tsx (Next.js, tanpa config apa pun)
export default function Tentang() {
  return <h1>Tentang Kami</h1>;
}

Cukup bikin file di lokasi yang benar, route /tentang langsung hidup. Hapus file-nya, route-nya ikut hilang. Tidak ada daftar yang bisa basi, tidak ada "route hantu" yang terdaftar padahal filenya sudah dihapus. Ini contoh nyata filosofi convention over configuration: framework menyimpulkan maksudmu dari struktur file.

Contoh 2: SEO dan metadata bawaan

Di React + Vite, file index.html punya satu tag title statis untuk seluruh aplikasi, dan konten halaman di-render di browser. Google melihat HTML yang minim isi.

Di Next.js, setiap halaman bisa mendeklarasikan metadata-nya sendiri, dan kontennya sudah jadi di server:

// app/blog/page.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "Blog Saya",
  description: "Tulisan tentang ngoding dan kopi.",
};

export default function Blog() {
  return (
    <main>
      <h1>Blog</h1>
      <p>Konten ini ter-render di server: Google bisa membacanya langsung.</p>
    </main>
  );
}

Export bernama metadata ini otomatis diubah Next.js menjadi tag <title> dan <meta> di <head> halaman /blog saja, tidak bocor ke halaman lain. Tidak perlu library helmet, tidak perlu useEffect yang mengubah document.title manual. Halaman publik yang SEO-friendly praktis menjadi default, bukan perjuangan tambahan.

Aturan praktis memilih

Pilih React + Vite untuk: dashboard internal atau admin yang tidak butuh SEO, prototype cepat untuk demo, aplikasi yang sepenuhnya di balik login, atau widget interaktif kecil yang ditempel ke website lain.

Pilih Next.js untuk: website publik yang butuh SEO (blog, company profile, toko online), landing page yang waktu muat pertamanya menentukan konversi, atau saat kamu butuh API sederhana tanpa membangun server terpisah (Route Handlers).

Rumus sederhananya: kalau halamanmu perlu ditemukan Google atau dibuka orang asing dari link, pilih Next.js. Kalau hanya dipakai orang dalam yang sudah login, Vite cukup.

Mitos yang perlu diluruskan

Mitos: "Next.js selalu lebih cepat." Fakta: untuk aplikasi kecil yang murni interaktif dan tidak butuh SEO, Vite + React bisa terasa lebih ringan karena tidak ada overhead server dan build-nya secepat kilat. Keunggulan Next.js terletak di waktu muat pertama dan SEO, bukan di semua skenario. Klaim "lebih cepat" tanpa konteks adalah marketing, bukan engineering.

Mitos: "Belajar Next.js berarti React-mu sia-sia." Fakta: keduanya memakai React yang sama persis. Skill React-mu (component, props, hooks, state) 100% transferable ke Next.js. Yang baru hanya konvensi framework-nya: di mana file ditaruh dan mana kode yang jalan di server.

Kesalahan umum pemula

1. Memakai Next.js untuk dashboard internal di balik login

SALAH: Membangun dashboard inventaris kantor dengan Next.js, lalu pusing mengurus server, build lambat, dan konsep server/client, padahal tidak satu pun halamannya perlu di-index Google.

BENAR: Untuk kasus murni internal, React + Vite lebih ringan: build statis, deploy ke hosting file biasa, selesai. Simpan Next.js untuk yang memang butuh kelebihannya.

2. Install react-router-dom di project Next.js

SALAH: Karena terbiasa dengan React polos, tetap install react-router-dom di project Next.js. Hasilnya dua sistem routing yang saling bertentangan dan error navigasi yang aneh.

BENAR: Hapus library itu. Routing Next.js sudah bawaan lewat folder di app/. Satu project, satu sistem routing.

3. Memilih stack karena hype, bukan kebutuhan

SALAH: "Semua orang pakai Next.js, jadi aku juga" untuk project tugas kuliah berupa kalkulator interaktif sederhana. Overkill yang menambah waktu belajar tanpa manfaat.

BENAR: Tanyakan dulu: butuh SEO? Butuh SSR? Butuh API? Kalau tiga-tiganya tidak, Vite adalah jawaban yang jujur dan tidak memalukan.

4. Mengira pindah ke Next.js berarti belajar dari nol

SALAH: Menunda belajar Next.js berbulan-bulan karena mengira semua ilmu React harus diulang.

BENAR: Kalau kamu sudah nyaman dengan React, yang perlu dipelajari hanyalah konvensi file, Server Component, dan cara fetch data. Itu hitungan hari, bukan bulan. Mulai saja.