ayrisdev/kite-qr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
kite-qr/implementation_plan.md
T
ayrisdev f8ca2034e0 kite-menu-lang
2026-06-11 14:05:36 +03:00

3.5 KiB
Raw Permalink Blame History

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?
Reference in New Issue View Git Blame Copy Permalink