63 lines
3.5 KiB
Markdown
63 lines
3.5 KiB
Markdown
# Next.js App Router Internationalization (i18n) Implementation Plan
|
||
|
||
Bu plan, uygulamanıza İngilizce (en) ve Türkçe (tr) dil desteğini eklemek için yapılacak mimari değişiklikleri detaylandırmaktadır. Paylaştığınız doküman linki eski "Pages Router" yapısına aitti, ancak bu proje modern "App Router" yapısında olduğu için Next.js'in güncel `[lang]` tabanlı App Router i18n standartlarını uygulayacağız.
|
||
|
||
## Özet ve Hedefler
|
||
- `[lang]` dinamik klasör yapısına geçiş.
|
||
- Tarayıcı diline göre yönlendirme yapan bir `middleware.ts` dosyası.
|
||
- Veritabanındaki `name`/`name_tr` ve `description`/`description_tr` alanlarının seçilen dile göre dinamik getirilmesi.
|
||
- Sabit metinler için basit bir sözlük (dictionary) yapısı kurulması.
|
||
- Kullanıcının dili manuel olarak değiştirebileceği şık bir Dil Seçici (Language Switcher) bileşeni.
|
||
|
||
> [!IMPORTANT]
|
||
> **User Review Required**
|
||
> Lütfen aşağıdaki planı inceleyin ve onay verin veya eklenmesini istediğiniz başka bir dil/detay varsa belirtin.
|
||
|
||
## Açık Sorular
|
||
> [!WARNING]
|
||
> - Varsayılan (default) dili **Türkçe** (`tr`) olarak belirliyorum, uygun mudur?
|
||
> - Dil seçici butonunu ekranın neresinde göstermek istersiniz? (Öneri: Menü navigasyonunun hemen üzerinde veya sayfanın en üstünde sağ köşede)
|
||
|
||
---
|
||
|
||
## Önerilen Değişiklikler
|
||
|
||
### Routing ve Middleware
|
||
Ana sayfayı ve layout'u çoklu dil yapısına uygun hale getireceğiz.
|
||
#### [NEW] `middleware.ts`
|
||
Uygulamaya gelen istekleri kontrol edip, eğer URL'de `/tr` veya `/en` yoksa kullanıcının tarayıcı tercihine veya varsayılan dile (`tr`) yönlendirecek.
|
||
#### [MODIFY] `app/layout.tsx` -> `app/[lang]/layout.tsx`
|
||
Layout, artık url'den gelen `params.lang` değerini alacak ve `<html lang={lang}>` özelliğini dinamik olarak ayarlayacak.
|
||
#### [MODIFY] `app/page.tsx` -> `app/[lang]/page.tsx`
|
||
Sayfa, `lang` parametresine göre çalışacak ve veritabanından verileri çekerken bu dile dikkat edecek.
|
||
|
||
---
|
||
|
||
### Veritabanı ve Veri Çekme (Data Fetching)
|
||
Mevcut şemada zaten İngilizce ve Türkçe alanlar bulunuyor.
|
||
#### [MODIFY] `app/[lang]/page.tsx` (İçerik)
|
||
`getMenuData` fonksiyonu güncellenecek:
|
||
- Eğer dil `en` ise: `title: cat.name`, `name: p.name`, `description: p.description`
|
||
- Eğer dil `tr` ise: `title: cat.name_tr`, `name: p.name_tr`, `description: p.description_tr`
|
||
|
||
---
|
||
|
||
### Sabit Metinler (Dictionaries)
|
||
Arayüzde veritabanından gelmeyen sabit yazılar için bir sözlük mekanizması kuracağız.
|
||
#### [NEW] `lib/dictionaries.ts`
|
||
İçerisinde "Akyaka'nın en keyifli menüsü", "Tüm hakları saklıdır" gibi metinlerin hem Türkçe hem İngilizce karşılıklarını tutan basit bir sistem oluşturulacak.
|
||
|
||
---
|
||
|
||
### Arayüz (UI)
|
||
#### [MODIFY] `app/MenuClient.tsx`
|
||
- Sabit metinler (Header yazıları, Footer yazıları) `dictionaries` objesinden beslenecek şekilde `props` olarak alınacak.
|
||
- Sayfaya (Örneğin sağ üst köşeye veya menü başlıklarının üstüne) `TR / EN` dilleri arasında geçiş yapmayı sağlayacak bir buton eklenecek.
|
||
|
||
---
|
||
|
||
## Doğrulama Planı (Verification Plan)
|
||
1. **Middleware Testi**: `http://localhost:3000/` adresine girildiğinde `http://localhost:3000/tr` adresine otomatik yönlendiriliyor mu?
|
||
2. **İngilizce Testi**: `http://localhost:3000/en` adresine girildiğinde ürünlerin İngilizce isimleri (`name`) ve açıklamaları (`description`) geliyor mu? Sabit metinler (Copyright vb.) İngilizceye dönüyor mu?
|
||
3. **Dil Değiştirici Testi**: UI üzerindeki butonla diller arası geçiş yapıldığında sayfa sorunsuz bir şekilde güncelleniyor mu?
|