Halo, saya Fadil Bafagih

Fadil Bafagih•28 Okt 2026•2 menit baca

Arsitektur Multi-Domain Next.js 16: Mengisolasi Web Publik dan Admin Dashboard dalam Satu Codebase

Ketika mengembangkan platform web modern dengan Next.js, developer kerap dihadapkan pada dilema arsitektur: haruskah kita membuat dua repositori terpisah (satu untuk situs publik dan satu untuk admin dashboard), atau menyatukannya ke dalam satu monorepo/codebase? Membuat dua repositori terpisah sering kali menimbulkan overhead: duplikasi tipe data TypeScript, konfigurasi database ganda, dan sinkronisasi design system yang melelahkan. Di sisi lain, meletakkan rute /dashboard dan /login langsung berdampingan dengan landing page publik berisiko membuka celah keamanan jika rute sensitif tersebut dapat discan oleh bot otomatis di internet. Solusi elegan untuk mengatasi tantangan ini adalah menerapkan Reverse Proxy / Middleware tingkat lanjut pada Next.js dengan pemisahan domain berbasis host. Topologi Routing Multi-Domain Sistem ini memfilter traffic langsung pada layer masuk (entry point) berdasarkan header Host atau x-forwarded-host: Mengapa Memilih 404 Rewrite Dibandingkan Redirect 302? Sebagian besar implementasi autentikasi pemula menggunakan HTTP Redirect (302 Found atau 307 Temporary Redirect) saat membatasi akses, misalnya mengarahkan pengguna asing dari /dashboard kembali ke /login atau /. Secara keamanan informasi, langkah redirect ini justru mengonfirmasi kepada peretas atau bot crawler bahwa rute tersebut memang ada di server Anda. Dengan menggunakan NextResponse.rewrite ke rute /not-found, server mengembalikan status code 404 Not Found murni dengan tampilan standar Page Not Found. Bot pemindai otomatis (vulnerability scanners) akan mencatat rute tersebut tidak ada sama sekali. Implementasi Proxy pada Next.js Berikut adalah implementasi clean code proxy multi-domain yang siap diadaptasi: Strategi Lokalisasi (i18n) Hibrida Tantangan kedua dalam arsitektur terpadu ini adalah kebutuhan lokalisasi bahasa: Sisi Publik Berbasis URL Sub-path: Halaman publik membutuhkan rute /en/... dan /id/... agar search engine seperti Google dapat mengindeks konten dalam bahasa yang tepat untuk target pembaca masing-masing. Sisi Dashboard Berbasis Client State: Pengguna admin tidak membutuhkan URL yang berganti-ganti bahasa. Pengaturan bahasa cukup disimpan di cookie atau local storage (admin-language) dan dikelola oleh React Context secara instan tanpa page reload. Pastikan konfigurasi CORS dan cookie session autentikasi diatur dengan atribut SameSite=Lax dan domain wildcard (.example.com) jika sesi login perlu dibagikan antar subdomain, atau isolasi cookie ke subdomain spesifik jika menginginkan keamanan ekstra ketat. Kesimpulan Pola arsitektur multi-domain dengan proxy Next.js memberikan keseimbangan optimal antara efisiensi pengembangan dan ketahanan keamanan. Kita hanya memelihara satu basis kode dan satu pipeline deployment, namun menyajikan perimeter isolasi yang kokoh untuk melindungi area administratif.