kontenhumas-fe/docs/AUTO_LOCALE_ROUTING.md

Auto Locale Routing

Sistem auto routing locale telah diimplementasikan untuk memastikan bahwa semua URL otomatis memiliki prefix locale.

🚀 Cara Kerja:

1. Middleware (Server-side)

• File: middleware.ts
• Fungsi: Menangani redirect di server-side sebelum halaman dimuat
• Logika:
  • Jika URL tidak memiliki prefix locale (/in, /en, /ar)
  • Maka akan otomatis redirect ke /in + path yang diminta
  • Contoh: /admin/dashboard → /in/admin/dashboard

2. Auto Redirect Component (Client-side)

• File: components/auto-redirect.tsx
• Fungsi: Fallback untuk client-side redirect jika middleware tidak bekerja
• Logika: Menggunakan useRouter untuk redirect di browser

3. Root Pages

• File: app/page.tsx dan app/layout.tsx
• Fungsi: Menangani akses ke root path tanpa locale
• Logika: Menggunakan AutoRedirect component

📋 Contoh Redirect:

URL yang diakses	URL hasil redirect
/	/in
/admin/dashboard	/in/admin/dashboard
/content/image	/in/content/image
/settings	/in/settings

⚙️ Konfigurasi:

Default Locale:

const defaultLocale = "in";

Supported Locales:

const locales = ["in", "en", "ar"];

Middleware Matcher:

matcher: ['/((?!api|_next|_static|.*\\..*).*)']

🔧 Fitur:

• ✅ Server-side redirect (lebih cepat)
• ✅ Client-side fallback (lebih reliable)
• ✅ Skip redirect untuk API routes dan static files
• ✅ Preserve query parameters saat redirect
• ✅ SEO friendly dengan proper HTTP redirect codes

🎯 Keuntungan:

1. User Experience: User tidak perlu mengetik prefix locale
2. SEO: Search engine akan selalu mendapat URL dengan locale
3. Consistency: Semua URL memiliki format yang konsisten
4. Fallback: Jika server-side redirect gagal, client-side akan menangani
5. Performance: Redirect terjadi sebelum halaman dimuat

🚨 Catatan Penting:

• Middleware akan menangani sebagian besar kasus
• Auto Redirect component hanya sebagai fallback
• Pastikan semua route sudah ada di app/[locale]/ directory
• Test dengan berbagai URL untuk memastikan redirect bekerja