Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, Oğuz adlı bir eğitmen tarafından sunulan Next.js framework'ünde uluslararasılaştırma (internationalization) işlemini anlatan bir eğitim içeriğidir.
- Videoda, Next.js'in 10. versiyondan itibaren sunduğu uluslararasılaştırma özelliği adım adım gösterilmektedir. Eğitmen, yeni bir Next.js projesi oluşturma, next.config.js dosyası ile dil desteği yapılandırma, dil dosyalarını oluşturma ve kullanıcı dil seçimi yapma sürecini kod örnekleriyle anlatmaktadır. Ayrıca, router push ile yönlendirme yaparak ve iki farklı dosya üzerinden metin değiştirme işlemini uygulamalı olarak açıklamaktadır.
- Eğitim, browser'daki dil ayarlarının nasıl çalıştığını ve kullanıcı dil seçimi yapıldığında içerik nasıl değiştiğini detaylı olarak göstermektedir. Bu işlem için özel bir paket yüklemenin veya konfigürasyonun gerekmediği, sadece birkaç kod parçası ve iki lokal tanımla gerçekleştirilebileceği vurgulanmaktadır.
- 00:01Next.js ile Uluslararası İşlem
- Uluslararası işlem, web sitemizin birden fazla dili desteklemesi ve kullanıcı seçtiği dilde içeriklerin görüntülenmesi işlemidir.
- Normalde React projelerinde i18m plugini kullanılarak uluslararası işlem yapılırken, Next.js 10. versiyondan itibaren bu özelliği kurulu olarak sunmaktadır.
- 01:18Uluslararası Konfigürasyon
- Uluslararası konfigürasyon için next.config.js dosyası oluşturulur ve burada dil kodları tanımlanır.
- Default local, projenin ilk kurulduğunda hangi dilde çalışacağını belirler.
- Sub-path routing, dil seçildiğinde belirli bir alt yolda içeriklerin görüntülenmesini sağlar.
- Domain routing, domain üzerinden dil desteği sağlar (örneğin eBay.com.tr).
- 03:18Proje Oluşturma ve Konfigürasyon
- Proje oluşturulduktan sonra npm run dev komutu ile geliştirme modu başlatılır.
- next.config.js dosyasına dil kodları (en, tr) ve default local (tr) tanımlanır.
- Proje yeniden başlatıldıktan sonra localhost:3000 portunda çalışır.
- 05:23Dil Dosyaları Oluşturma
- İki dil dosyası (en.js ve tr.js) oluşturulur ve her dosyada farklı metinler (hello, merhaba dünya) tanımlanır.
- Kullanıcı hangi dili seçerse, o dil dosyasındaki metinler görüntülenir.
- Tarayıcıda dil ayarları değiştirildiğinde, HTTP isteklerinde "Accepted Language" header'ında dil uzantıları (en, tr) görüntülenir.
- 08:04Dil Seçimi ve İçerik Değiştirme
- useRouter kullanılarak router nesnesi oluşturulur ve dil bilgileri ekrana yazdırılır.
- Select tag ile dil seçimi yapılır ve changeLanguage fonksiyonu ile dil değiştirilir.
- ChangeLanguage fonksiyonunda router.push kullanılarak seçilen dil dosyasına yönlendirme yapılır.
- İçerik değiştirme için t değişkeni kullanılarak dil dosyasına göre text değerleri getirilir.
- 13:45Next.js ile Dil İçiçe İşlemi
- T içerisinde "hello" key-value çifti bulunuyor ve web store'un güzelliği bu çifti otomatik olarak getiriyor.
- "hello" dediğimizde, hangi dil seçiliyse o dildeki "merhaba dünya" yazısını getirmesini bekliyoruz.
- Lokal dil olarak "tr" seçili olduğu için Türkçe olarak "merhaba dünya" yazısı görüntüleniyor.
- 14:26Dil Değişimi ve Yönlendirme
- İngilizce seçildiğinde, lokal router push ile ilgili rou'a yönlendiriliyor ve oluşturulan dosyalar içerisinden metinler değiştiriliyor.
- Ana rou'a dönüldüğünde sub-path gidiyor ve dil Türkçe'ye dönüyor.
- Next.js ile dil içiçe işlemi bu kadar kolay gerçekleştirilebiliyor, ek paket yüklemeye veya konfigürasyon yapmaya gerek yok.
- 15:15Video Kapanışı
- Videoyu beğenenlerin kanala abone olmaları isteniyor.
- İzleyicilere teşekkür ediliyor ve kendilerine iyi bakmaları tavsiye ediliyor.