Pendahuluan
Saat pertama kali membangun website MaduraDev, kami memilih Next.js. Pada saat itu, Next.js merupakan pilihan yang masuk akal karena menawarkan banyak fitur modern seperti App Router, Server Components, Image Optimization, hingga rendering hybrid. Namun, setelah website berkembang dan kebutuhan semakin jelas, kami mulai mengevaluasi kembali apakah semua fitur tersebut benar-benar kami perlukan.
Hasilnya, kami memutuskan untuk melakukan migrasi penuh ke React Router v7. Keputusan ini bukan karena Next.js buruk, melainkan karena React Router v7 memberikan pengalaman yang lebih sederhana, fleksibel, dan sesuai dengan kebutuhan website komunitas kami.
Mengenal MaduraDev
Sebelum membahas alasan teknis, sedikit cerita mengenai MaduraDev.
MaduraDev adalah komunitas teknologi yang berfokus pada pengembangan talenta digital di Pulau Madura. Website MaduraDev menjadi pusat berbagai aktivitas komunitas seperti:
- Event
- Event ticket
- media(BlogDev,KabarDev)
- map komunitas madura
- twibbon
Sebagian besar halaman tersebut bersifat informatif dan tidak membutuhkan kompleksitas aplikasi enterprise.
Routing Menjadi Lebih Jelas
Di Next.js, routing memang mudah karena mengikuti struktur folder. Namun ketika aplikasi mulai memiliki puluhan halaman, struktur folder menjadi cukup dalam.
app/
├── (marketing)
├── (dashboard)
├── blog
│ ├── [slug]
│ │ page.tsx
│ └── page.tsx
├── event
│ ├── [slug]
│ │ page.tsx
│ └── page.tsx
Sebagian besar file memiliki nama yang sama:
- page.tsx
- layout.tsx
- loading.tsx
- error.tsx
Ketika berpindah-pindah halaman, kami sering harus membuka banyak folder hanya untuk mencari sebuah route.
React Router v7 menggunakan pendekatan berbeda.
Semua route dapat didefinisikan dalam satu tempat.
route("/", "routes/home.tsx"),
route("/blog", "routes/blog.tsx"),
route("/blog/:slug", "routes/blog-detail.tsx"),
route("/event", "routes/event.tsx"),
Dalam beberapa detik kami sudah dapat melihat keseluruhan sitemap aplikasi. Untuk proyek komunitas yang sering menerima pull request, pendekatan ini jauh lebih mudah dipahami.
Vite Memberikan Developer Experience yang Sangat Cepat
React Router v7 dibangun di atas Vite.
Kami langsung merasakan:
- startup dev server lebih cepat dan di kombinasikan dengan Bun
- Hot Module Replacement hampir instan
- build lebih ringan
- konfigurasi lebih sederhana
Integrasi Tailwind CSS v4 juga menjadi jauh lebih mudah.
Kami bahkan tidak lagi memerlukan konfigurasi Tailwind yang panjang seperti sebelumnya.
Typegen Membuat TypeScript Lebih Aman
Salah satu fitur favorit kami adalah Typegen.
React Router secara otomatis menghasilkan tipe data untuk:
- Loader
- Params
- Action
Contohnya:
import type { Route } from "./+types/login";
export async function loader({ request }: Route.LoaderArgs) {
Tidak perlu lagi membuat interface secara manual.
Autocomplete menjadi jauh lebih baik.
Error saat compile juga jauh berkurang.
Tidak Lagi Memikirkan "use client"
Ini mungkin alasan yang paling terasa.
Di Next.js App Router kami sering berpikir:
- ini Server Component?
- ini Client Component?
- apakah perlu "use client"?
- apakah hook ini boleh dipakai?
Pertanyaan tersebut memang penting untuk optimasi, tetapi juga menambah beban berpikir.
Di React Router v7 modelnya jauh lebih sederhana.
- Loader mengambil data.
- Action mengubah data.
- Component merender UI.
Selesai.
Tidak ada lagi kebingungan antara Server Component dan Client Component.
Lebih Mudah Dideploy
Website MaduraDev tidak selalu berjalan di Vercel.
Kami sering melakukan deployment ke:
- VPS
- Docker
- Coolify
- Cloud Provider lain
React Router v7 menggunakan standar Web API (Request dan Response), sehingga proses deployment terasa lebih universal dan tidak bergantung pada platform tertentu.
Hal ini memberi kami kebebasan untuk memilih infrastruktur yang paling sesuai.
Lebih Ramah untuk Kontributor Open Source
MaduraDev merupakan proyek komunitas.
Artinya siapa pun dapat ikut berkontribusi.
Semakin sederhana struktur proyek, semakin cepat anggota baru memahami codebase.
Dengan React Router v7:
- struktur folder lebih mudah dipahami
- routing lebih eksplisit
- learning curve lebih rendah
- debugging lebih sederhana
Bagi mahasiswa atau developer yang baru belajar React, pengalaman ini jauh lebih menyenangkan.
Apakah Kami Menyesal Menggunakan Next.js?
Tidak.
Next.js tetap merupakan framework yang sangat luar biasa.
Jika kami membangun:
- SaaS
- Dashboard Enterprise
- Marketplace
- E-Commerce
- Aplikasi dengan kebutuhan SSR kompleks
Kemungkinan besar kami masih akan mempertimbangkan Next.js. Namun, untuk kebutuhan website komunitas seperti MaduraDev, React Router v7 terasa lebih sesuai.
Penutup
Migrasi ini bukan sekadar mengganti library routing.
Ini adalah keputusan untuk menyederhanakan arsitektur, meningkatkan pengalaman developer, dan membuat proyek open source kami lebih mudah dipelajari oleh siapa pun. Pada akhirnya, memilih framework bukan tentang mencari yang paling populer atau paling banyak fitur. Melainkan memilih alat yang paling tepat untuk menyelesaikan masalah yang kita hadapi. Dan bagi MaduraDev, saat ini jawabannya adalah React Router v7.