73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
# 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:**
|
|
```typescript
|
|
const defaultLocale = "in";
|
|
```
|
|
|
|
### **Supported Locales:**
|
|
```typescript
|
|
const locales = ["in", "en", "ar"];
|
|
```
|
|
|
|
### **Middleware Matcher:**
|
|
```typescript
|
|
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
|