SvelteKit ile Internationalization (Çoklu Dil Desteği)

Arka Plan

Web sitenize trafik çekmek için, web sitenize dil desteği eklemeyi düşünebilirsiniz.

Örneğin, aşağıdaki grafik, 12 Mayıs 2024 tarihi itibariyle web sitemdeki sayfa ziyaretlerini göstermektedir.

Çoğu ziyaretin İngilizce sayfalara yapıldığını (çünkü genel olarak ana sayfa İngilizce) göz önüne alırsak, Türkçe ve Japonca sürümlere yapılan ziyaretlerin önemli bir miktar olduğunu görebilirsiniz. Kesinlikle web sitelerinize bu potansiyel ziyaretleri kaçırmak istemezsiniz.

Ayrıca, ChatGPT çevirilerinin bugünlerde oldukça iyi olduğunu düşünürsek, içeriği çevirmek için gereken çaba eskisi kadar yüksek değil. ChatGPT çevirileri genellikle mükemmel olmasa da, içeriği çevirirken harika bir çalışma tahtası sağlar.

SvelteKit ile web sitenizi nasıl uluslararası hale getirebilirsiniz?

Konuyla ilgili herhangi bir araştırma yapmadım ama web sitemde 3 dilin mümkün olduğu kadar basitleştirilmiş bir şekilde etkinleştirilmesi stratejimi açıklayayım. Yaklaşımım 3 asamalidir:

1. Routing stratejisi

Web sitem, www.danyelkoca.com/<dil>/<birşey>

• www.danyelkoca.com/en/about
• www.danyelkoca.com/jp/works/tetris
• www.danyelkoca.com/tr/blog/on-greatness

Bu yönlendirme şekli, routes klasörünüzde bu klasör yapısı ile elde edilebilir:

Web sitem 3 dil içerdiği için, src klasörü içinde 3 alt klasör bulunmaktadır.

• en
• jp
• tr

Her alt klasör neredeyse aynı içeriğe sahiptir, ancak bu zorunlu değildir. Örneğin, yalnızca İngilizce'de bir ürünler sayfanız varsa, ürünler alt klasörünün yalnızca en klasörü altında bulunması mantıklı olacaktır.

2. State Management Stratejisi

Yönlendirme yapıldıktan sonra, kullanıcının seçtiği dilin takibini yapmamız gerekiyor. Çünkü çoğu durumda, her dil için ayrı bir sayfanız olmayacak. Örneğin:

let language = "en"; // jp ya da tr mümkün
let greeting = language == "en" ? "Hello" : language == "jp" : "こんにちは"  : "Selam";

Tabii ki, her sayfada bir değişken bildirmeyeceğiz, ancak SvelteKit'te bir writable store kullanacağız.

 // stores/main.js
	import { writable } from 'svelte/store';
export const language = writable('en');

Bu mağaza değişkeni, ihtiyaca göre bileşenlerimizde içe aktarılır ve aşağıdaki gibi kullanılır:

<script>
import { language } from '$stores/main'
let title = $language == "en" ? "About" : $language == "jp" : "私について" : "Hakkımda";
</script>

<svelte:head>
	<title>{title}</title>
</svelte:head>

3. Component Stratejisi

Her dil için farklı bir rota varsa, her dil için içerik nasıl sunulur? Ne demek istediğim, her sayfa ve dil için farklı bir page.svelte'imiz var.

• en/contact/page.svelte
• jp/contact/page.svelte
• tr/contact/page.svelte

Sayfalarımızda sunulan içerik benzerse, 1 bileşene sahip olacağız ve dil kullanarak koşullu ayarlamalar yapacağız.

Bu nedenle, yukarıdaki örnekteki her page.svelte, aynı Contact bileşimine başvuracaktır:

<script>
	import Contact from 'components/Contact.svelte';
</script>

<Contact />

Ve Contact bileşeni içinde, depolanan dil değişkenine dayalı olarak içeriği dinamik olarak oluşturacağız.

 // components/Contact.svelte
<script>
import { language } from '$stores/main'
</script>

<h1>
		{$language == 'en' ? 'Bana Ulaşın' : $language == 'jp' ? 'お問い合わせ' : 'İletişim'}
</h1>

Ancak, bazı sayfalarınız dil bağlı olarak çok farklı içeriklere sahip olacak, bu nedenle içeriği bir sayfada koşullu olarak oluşturmak kabus olacaktır (Örneğin, bir blog yazısı). Bunlar için, her dil için ayrı bir bileşen oluşturmanızı öneririm.

4. Diğerleri: Store'i Güncelleme

Düşünmeniz gereken son bir şey, web sitenizdeki language değişkenini takip etmeniz gerektiğidir. Web sitenizde dil düğmesi bulunacak ve bu şekilde çalışacaktır:

<div>
	<button on:click={() => language.set('en')}>İngilizce</button>
	<button on:click={() => language.set('jp')}>Japonca</button>
	<button on:click={() => language.set('tr')}>Türkçe</button>
</div>

Bu yönetmek kolaydır. Ancak, dil için depolanan değeriniz, en gibi başlangıçta bir başlangıç değerine sahip olacaktır. Kullanıcı doğrudan bir Japonca veya Türkçe sayfasını ziyaret ettiğinde, sayfa bile görüntülenmeden önce dil değişkenini güncellemeniz gerekir, böylece kullanıcıya doğru içeriği gösterebilirsiniz.

Bunun için, genellikle veri yükleme için kullanılan SvelteKit'teki page.js kullanırız. Bu sayfa, page.svelte'den önce çalışır ve herhangi bir durum değişikliğini yapmak için mükemmel bir yerdir:

// routes/jp/{something}/page.svelte
import { language } from '$stores/main';
language.set('jp');

İngilizce ve Türkçe rotalar için bunu yapmanız gerektiğini unutmayın. İngilizce için, varsayılan mağaza değeri İngilizce olduğu için bunun gerekli olmadığını düşünebilirsiniz. Ancak, kullanıcı dilini Japonca'ya değiştirir ve İngilizce bir site ziyaret ederse, bu durumda dil Japonca olarak kalacaktır. Böyle durumları önlemek istiyoruz.

Sonuç

Bu blog gönderisinde, web sitemi 3 dilde kolayca dağıtmak için kullandığım stratejileri özetledim. Birden fazla dilde bir web sitesini yönetmek karışık olabilir, ancak kullanıcıya pürüzsüz bir deneyim sunmak ve mühendisin iş yükünü azaltmak için SvelteKit fonksiyonlarını kullanabiliriz.

Daha iyi bir yaklaşımınız var mı? Bana bildirin.

Bu arada, mutlu kodlamalar!