Yaklaşan Intlayer sürümleri hakkında bildirim alın
    Oluşturma:2024-03-07Son güncelleme:2025-10-03

    Intlayer ve Astro ile Uluslararasılaştırmaya (i18n) Başlarken

    GitHub'da Uygulama Şablonuna bakın.

    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.

    Intlayer ile şunları yapabilirsiniz:

    • Bileşen seviyesinde bildirisel 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, otomatik tamamlama ve hata tespitini geliştirin.
    • Dinamik yerel algılama ve değiştirme gibi gelişmiş özelliklerden faydalanın.

    Astro'da Intlayer Kurulumuna Adım Adım Rehber

    Adım 1: Bağımlılıkları Yükleyin

    Gerekli paketleri paket yöneticinizle yükleyin:

    npm install intlayer astro-intlayer# Opsiyonel: React island desteği ekleyinnpm install react react-dom react-intlayer @astrojs/react

    • intlayer Yapılandırma yönetimi, çeviri, içerik bildirimi, transpile etme ve CLI komutları için uluslararasılaştırma araçları sağlayan temel paket.

    • astro-intlayer Astro entegrasyon eklentisini içerir; bu eklenti, Intlayer'ı Vite paketleyici ile entegre etmek için kullanılır ve ayrıca kullanıcının tercih ettiği yerel dili algılamak, çerezleri yönetmek ve URL yönlendirmesini işlemek için ara yazılım sağlar.

    Adım 2: Projenizin Yapılandırması

    Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:

    intlayer.config.ts
    import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [      Locales.ENGLISH,      Locales.FRENCH,      Locales.SPANISH,      // Diğer yerel dilleriniz    ],    defaultLocale: Locales.ENGLISH,  },};export default config;

    Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'ler, ara yazılım yönlendirmesi, çerez isimleri, içerik bildirimlerinizin konumu ve uzantısı, Intlayer günlüklerini konsolda devre dışı bırakma ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma dokümantasyonuna bakınız.

    Adım 3: Intlayer'ı Astro Yapılandırmanıza Entegre Edin

    Yapılandırmanıza intlayer eklentisini ekleyin.

    astro.config.ts
    // @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer()],});

    intlayer() Astro entegrasyon eklentisi, Intlayer'ı Astro ile entegre etmek için kullanılır. İçerik bildirim dosyalarının oluşturulmasını sağlar ve geliştirme modunda bunları izler. Astro uygulaması içinde Intlayer ortam değişkenlerini tanımlar. Ayrıca, performansı optimize etmek için takma adlar sağlar.

    Adım 4: İçeriğinizi Bildirin

    Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:

    src/app.content.tsx
    import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = {  key: "app",  content: {    title: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola mundo",    }),  },} satisfies Dictionary;export default appContent;

    İçerik bildirimleriniz, uygulamanızda contentDir dizinine (varsayılan olarak ./src) dahil edildiği sürece herhangi bir yerde tanımlanabilir. Ve içerik bildirim dosya uzantısıyla eşleşmelidir (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).

    Daha fazla detay için içerik bildirim dokümantasyonuna bakabilirsiniz.

    Adım 5: İçeriğinizi Astro'da Kullanın

    Sözlükleri, intlayer tarafından dışa aktarılan temel yardımcıları kullanarak doğrudan .astro dosyalarında tüketebilirsiniz.

    src/pages/index.astro
    <!-- astro -->---import { getIntlayer } from "intlayer";import appContent from "../app.content";const { title } = getIntlayer('app');---<html lang="en">  <head>    <meta charset="utf-8" />    <meta name="viewport" content="width=device-width" />    <title>{title}</title>  </head>  <body>    <h1>{title}</h1>  </body></html>

    Adım 6: Yerelleştirilmiş yönlendirme

    Yerelleştirilmiş sayfalar sunmak için dinamik bir rota segmenti oluşturun, örneğin src/pages/[locale]/index.astro:

    src/pages/[locale]/index.astro
    <!-- astro -->---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>

    Astro entegrasyonu, geliştirme sırasında yerel farkındalıklı yönlendirme ve ortam tanımlamalarına yardımcı olan bir Vite ara yazılımı ekler. Yine de kendi mantığınızla veya intlayer'dan getLocalizedUrl gibi yardımcı fonksiyonları kullanarak diller arasında bağlantı kurabilirsiniz.

    Adım 7: Favori framework'ünüzü kullanmaya devam edin

    Favori framework'ünüzü kullanarak uygulamanızı geliştirmeye devam edin.

    TypeScript Yapılandırması

    Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.

    alt metin

    alt metin

    TypeScript yapılandırmanızın otomatik oluşturulan türleri içerdiğinden emin olun.

    tsconfig.json
    {  // ... Mevcut TypeScript yapılandırmalarınız  "include": [    // ... Mevcut TypeScript yapılandırmalarınız    ".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil et  ],}

    Git Yapılandırması

    Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna eklenmesini önlemenizi sağlar.

    Bunu yapmak için, .gitignore dosyanıza aşağıdaki talimatları ekleyebilirsiniz:

    # Intlayer tarafından oluşturulan dosyaları yoksay.intlayer

    VS Code Eklentisi

    Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Eklentisini yükleyebilirsiniz.

    VS Code Marketplace'ten Yükleyin

    Bu eklenti şunları sağlar:

    • Çeviri anahtarları için Otomatik Tamamlama.
    • Eksik çeviriler için Gerçek Zamanlı Hata Tespiti.
    • Çevrilmiş içeriğin Satır İçi Önizlemeleri.
    • Çevirileri kolayca oluşturup güncellemek için Hızlı İşlemler.

    Eklentinin nasıl kullanılacağı hakkında daha fazla bilgi için Intlayer VS Code Eklentisi dokümantasyonuna bakabilirsiniz.

    Daha İleri Gitmek

    Daha ileri gitmek için, görsel editörü uygulayabilir veya içeriğinizi CMS kullanarak dışa aktarabilirsiniz.

    Doküman Geçmişi

    Sürüm Tarih Değişiklikler
    6.2.0 2025-10-03 Astro entegrasyonu, yapılandırma, kullanım için güncelleme
    Tanstack Start
    React CRA
    Yaklaşan Intlayer sürümleri hakkında bildirim alın