Intlayer kullanarak SvelteKit web sitenizi çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Neden alternatifler yerine Intlayer?

"svelte-i18n" veya "i18next" gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:

SvelteKit Uygulamasında Intlayer Kurulumu için Adım Adım Rehber

Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımız son yapı:

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

1. 1

   Bağımlılıkları Yükleyin

   Gerekli paketleri npm kullanarak yükleyin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

   • intlayer: Temel i18n paketi.
   • svelte-intlayer: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
   • vite-intlayer: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.
2. 2

   Projenizin Yapılandırması

   Proje kök dizininizde bir yapılandırma dosyası oluşturun:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

3. 3

   Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

   vite.config.ts dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

4. 4

   İçeriğinizi Bildirin

   src klasörünüzde istediğiniz herhangi bir yerde içerik bildirim dosyalarınızı oluşturun (örneğin, src/lib/content veya bileşenlerinizin yanında). Bu dosyalar, uygulamanız için çevrilebilir içeriği her locale için t() fonksiyonunu kullanarak tanımlar.

5. 5

   Bileşenlerinizde Intlayer'ı Kullanın

   Artık useIntlayer fonksiyonunu herhangi bir Svelte bileşeninde kullanabilirsiniz. Bu fonksiyon, locale değiştiğinde otomatik olarak güncellenen reaktif bir store döner. Fonksiyon, mevcut locale'yi otomatik olarak dikkate alır (hem SSR sırasında hem de istemci tarafı gezinmede).

   Not: useIntlayer bir Svelte store döner, bu yüzden reaktif değerine erişmek için `--- createdAt: 2025-11-20 updatedAt: 2026-05-31 title: SvelteKit uygulamanızı nasıl çevirirsiniz – i18n rehberi 2026 description: SvelteKit web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Server-Side Rendering (SSR) kullanarak uluslararasılaştırma (i18n) ve çeviri yapmak için dokümantasyonu takip edin. keywords:

   • Uluslararasılaştırma
   • Dokümantasyon
   • Intlayer
   • SvelteKit
   • JavaScript
   • SSR slugs:
   • doc
   • environment
   • sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
   • version: 7.1.10 date: 2025-11-20 changes: Başlangıç geçmişi

   ---

   Intlayer kullanarak SvelteKit web sitenizi çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Intlayer nedir?

Intlayer, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir. SvelteKit'in Server-Side Rendering (SSR) yetenekleriyle sorunsuz çalışır.

Intlayer ile şunları yapabilirsiniz:

• Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetin.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• Otomatik oluşturulan tiplerle TypeScript desteğini sağlayın.
• SEO dostu uluslararasılaştırma için SvelteKit'in SSR'sinden yararlanın.

SvelteKit Uygulamasında Intlayer Kurulumu için Adım Adım Rehber

Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımız son yapı:

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

1. 1

   Bağımlılıkları Yükleyin

   Gerekli paketleri npm kullanarak yükleyin:

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

   • intlayer: Temel i18n paketi.
   • svelte-intlayer: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
   • vite-intlayer: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.
2. 2

   Projenizin Yapılandırması

   Proje kök dizininizde bir yapılandırma dosyası oluşturun:

   intlayer.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

3. 3

   Intlayer'ı Vite Konfigürasyonunuza Entegre Edin

   vite.config.ts dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.

   vite.config.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // sıralama önemlidir, Intlayer SvelteKit'ten önce yerleştirilmelidir});

4. 4

   İçeriğinizi Bildirin

   src klasörünüzde istediğiniz herhangi bir yerde içerik bildirim dosyalarınızı oluşturun (örneğin, src/lib/content veya bileşenlerinizin yanında). Bu dosyalar, uygulamanız için çevrilebilir içeriği her locale için t() fonksiyonunu kullanarak tanımlar.

5. 5

   Bileşenlerinizde Intlayer'ı Kullanın

   ön ekini kullanmanız gerekir (örneğin, $content.title).

   src/lib/components/Component.svelte

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section", Adım 4'te tanımlanan key'e karşılık gelir  const content = useIntlayer("hero-section");</script><!-- İçeriği basit içerik olarak render et --><h1>{$content.title}</h1><!-- İçeriği editör kullanarak düzenlenebilir şekilde render etmek için --><h1>{@const Title = $content.title}<Title /></h1><!-- İçeriği string olarak render etmek için --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

6. 6

   Yönlendirmeyi ayarlama

   İsteğe bağlı

   Aşağıdaki adımlar, SvelteKit'te locale tabanlı yönlendirmeyi nasıl ayarlayacağınızı gösterir. Bu, URL'lerinizin locale önekini içermesine olanak tanır (örneğin, /en/about, /fr/about) ve böylece SEO ve kullanıcı deneyimini iyileştirir.

   bash

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   .└─── src    ├── app.d.ts                  # Locale türünü tanımla    ├── hooks.server.ts           # Locale yönlendirmesini yönet    ├── lib    │   └── getLocale.ts          # Header ve çerezlerden locale kontrolü yap    ├── params    │   └── locale.ts             # Locale parametresini tanımla    └── routes        ├── [[locale=locale]]     # Locale'i ayarlamak için route grubuna sar        │   ├── +layout.svelte    # Yönlendirme için yerel düzen        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Yazı tipleri ve genel stiller için kök düzen

7. 7

   Sunucu Tarafı Dil Algılama (Hooks) İşlemi

   SvelteKit'te, SSR sırasında doğru içeriği render etmek için sunucunun kullanıcının dilini bilmesi gerekir. URL veya çerezlerden dili algılamak için hooks.server.ts kullanılır.

   src/hooks.server.ts dosyasını oluşturun veya düzenleyin:

   src/hooks.server.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Mevcut yolun zaten bir locale ile başlayıp başlamadığını kontrol edin (örneğin /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // URL'de locale yoksa (örneğin kullanıcı "/" adresini ziyaret ederse), yönlendirme yapın  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Geçici yönlendirme    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

   Ardından, kullanıcının locale bilgisini istek olayından almak için bir yardımcı oluşturun:

   src/lib/getLocale.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * İstek olayından kullanıcının yerel ayarını alın. * Bu fonksiyon `src/hooks.server.ts` dosyasındaki `handle` kancasına kullanılır. * * Öncelikle Intlayer depolamasından (çerezler veya özel başlıklar) yerel ayarı almaya çalışır. * Yerel ayar bulunamazsa, tarayıcının "Accept-Language" müzakeresine geri döner. * * @param event - SvelteKit'ten gelen istek olayı * @returns Kullanıcının yerel ayarı */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer depolamasından yerel ayarı almaya çalış (Çerezler veya başlıklar)  const storedLocale = getLocaleFromStorage({    // SvelteKit çerez erişimi    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit başlık erişimi    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Tarayıcı "Accept-Language" müzakeresine geri dönüş  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers nesnesini basit bir Record<string, string> nesnesine dönüştür  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` başlığından locale kontrolü yap  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Eşleşme bulunamazsa varsayılan locale döndür  return defaultLocale;};

   getLocaleFromStorage, yapılandırmanıza bağlı olarak yerel ayarı header veya cookie'den kontrol edecektir. Daha fazla detay için Configuration sayfasına bakınız.

   localeDetector fonksiyonu Accept-Language header'ını işleyip en uygun eşleşmeyi döndürecektir.

   Eğer yerel ayar yapılandırılmamışsa, 404 hatası döndürmek isteriz. Bunu kolaylaştırmak için, yerel ayarın geçerli olup olmadığını kontrol eden bir match fonksiyonu oluşturabiliriz:

   /src/params/locale.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

   Not: src/app.d.ts dosyanızın yerel ayar tanımını içerdiğinden emin olun:

   typescript

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

   +layout.svelte dosyası için, i18n ile ilgili olmayan sadece statik içeriği tutmak amacıyla her şeyi kaldırabiliriz:

   src/+layout.svelte

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

   Sonra, [[locale=locale]] grubu altında yeni bir sayfa ve layout oluşturun:

   src/routes/[[locale=locale]]/+layout.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Genel Load tipini kullanexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

   src/routes/[[locale=locale]]/+layout.svelte

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Yönlendirmeden alınan locale ile Intlayer'ı başlat  $effect(() => {      setupIntlayer(data.locale);  });    // Layout içerik sözlüğünü kullan    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

   src/routes/[[locale=locale]]/+page.ts

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   export const prerender = true;

   src/routes/[[locale=locale]]/+page.svelte

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Ana sayfa içerik sözlüğünü kullan    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

8. 8

   Uluslararasılaştırılmış Bağlantılar

   İsteğe bağlı

   SEO için, rotalarınızı locale ile öneklemeniz önerilir (örneğin, /en/about, /fr/about). Bu bileşen, herhangi bir bağlantıyı otomatik olarak mevcut locale ile önekler.

   src/lib/components/LocalizedLink.svelte

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // URL'ye mevcut locale'i öneklemek için yardımcı fonksiyon  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

   Eğer SvelteKit'ten goto kullanıyorsanız, aynı mantığı getLocalizedUrl ile kullanarak lokalize edilmiş URL'ye yönlendirme yapabilirsiniz:

   typescript

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Yerel dile bağlı olarak /en/about veya /fr/about adresine gider

9. 9

   Dil Değiştirici

   İsteğe bağlı

   Kullanıcıların dilleri değiştirmesine izin vermek için URL'yi güncelleyin.

   src/lib/components/LanguageSwitcher.svelte

   İçeriği kopyala

   Kodu kopyala

   Kodu panoya kopyala

   <script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Mağazada yerel ayarı yapacak ve onLocaleChange tetiklenecek        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

10. 10

    Backend proxy ekleme

    İsteğe bağlı

    SvelteKit uygulamanıza bir backend proxy eklemek için, vite-intlayer eklentisi tarafından sağlanan intlayerProxy fonksiyonunu kullanabilirsiniz. Bu eklenti, URL, çerezler ve tarayıcı dil tercihleri temelinde kullanıcı için en iyi yereli otomatik olarak algılar.

    vite.config.ts

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

11. 11

    intlayer editör / CMS kurulumu

    İsteğe bağlı

    intlayer editörünü kurmak için, intlayer editör dokümantasyonunu takip etmelisiniz.

    intlayer CMS'i kurmak için, intlayer CMS dokümantasyonunu takip etmelisiniz.

    intlayer editör seçicisini görselleştirebilmek için, intlayer içeriğinizde bileşen sözdizimini kullanmanız gerekecektir.

    Component.svelte

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- İçeriği basit içerik olarak render et -->  <h1>{$content.title}</h1>  <!-- İçeriği bir bileşen olarak render et (editör tarafından gereklidir) -->  {@const Component = $content.component}<Component /></div>

12. 12

    Bileşenlerinizin içeriğini çıkarın

    İsteğe bağlı

    Mevcut bir kod tabanınız varsa, binlerce dosyayı dönüştürmek zaman alıcı olabilir.

    Bu süreci kolaylaştırmak için Intlayer, bileşenlerinizi dönüştürmek ve içeriği çıkarmak için bir derleyici / çıkarıcı sunar.

    Kurulum için intlayer.config.ts dosyanıza bir compiler bölümü ekleyebilirsiniz:

    intlayer.config.ts

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    import { type IntlayerConfig } from "intlayer";
    
    const config: IntlayerConfig = {
      // ... Yapılandırmanızın geri kalanı
      compiler: {
        /**
         * Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.
         */
        enabled: true,
    
        /**
         * Çıktı dosyalarının yolunu tanımlar
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir. Bu sayede derleyici, uygulamayı dönüştürmek için yalnızca bir kez çalıştırılabilir ve ardından kaldırılabilir.
         */
        saveComponents: false,
    
        /**
         * Sözlük anahtarı öneki
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;

    Çıkarma komutuBabel derleyicisi

    Bileşenlerinizi dönüştürmek ve içeriği çıkarmak için çıkarıcıyı çalıştırın

    bash

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    npx intlayer extract

    vite.config.ts dosyanızı intlayerCompiler eklentisini içerecek şekilde güncelleyin:

    vite.config.ts

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Derleyici eklentisini ekler ],});

    bash

    İçeriği kopyala

    Kodu kopyala

    Kodu panoya kopyala

    npm run build # Veya npm run dev

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir.

# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayer

Daha İleri Gitmek İçin

• Görsel Editör: Çevirileri doğrudan kullanıcı arayüzünden düzenlemek için Intlayer Görsel Editör ile entegre olun.
• CMS: İçerik yönetiminizi dışa aktararak Intlayer CMS kullanın.