Ana SayfaPlaygroundShowcaseUygulamaDokümanBlog
    • Englishİngilizce
      EN
    • русскийRusça
      RU
    • 日本語Japonca
      JA
    • françaisFransızca
      FR
    • 한국어Korece
      KO
    • 中文Çince
      ZH
    • españolİspanyolca
      ES
    • DeutschAlmanca
      DE
    • العربيةArapça
      AR
    • italianoİtalyanca
      IT
    • British Englishİngiliz İngilizcesi
      EN-GB
    • portuguêsPortekizce
      PT
    • हिन्दीHintçe
      HI
    • TürkçeTürkçe
      TR
    • polskiLehçe
      PL
    • IndonesiaEndonezce
      ID
    • Tiếng ViệtVietnamca
      VI
    • українськаUkraynaca
      UK
    /
    Çerçeveye göre belgeleri filtrele
    Alt+←
    Neden Intlayer?
    Başla
    Kavram
    • Intlayer Nasıl Çalışır
    • Yapılandırma
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • Görsel Editör
    • CMS
    • CI/CD Entegrasyonu
    • ÇeviriÇoğulNumaralandırmaKoşulCinsiyetEklemeDosyaİç İçe GeçmeMarkdownHTMLFonksiyon Getirme
    • Yerel Dosya
    • Derleyici
    • Otomatik Doldurma
    • Test
    • Paket Optimizasyonu
    Ortam
    • Next.js 14 ve Uygulama Yönlendirici
      Next.js 15
      Next.js locale’siz URL
      Next.js ve Sayfa Yönlendirici
      Derleyici
    • Tanstack Start Solid
    • Astro ve React
      Astro ve Svelte
      Astro ve Vue
      Astro ve Solid
      Astro ve Preact
      Astro ve Lit
      Astro ve Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt ve Vue
    • Vite ve Solid
    • SvelteKit
    • Vite ve Preact
    • Vite ve Vanilla JS
    • Vite ve Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native ve Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx ve React
    Plugins
    • JSON
    • gettext (.po)
    VS Code Uzantısı
    Aracı
    • MCP Sunucusu
    • Aracı becerileri
    Sürümler
    • v8
    • v7
    • v6
    Karşılaştırma
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    Blog
    Bir soru sor
    1. Documentation
    2. Ortam
    3. Tanstack Start
    4. Solid
    Oluşturma:2025-03-25Son güncelleme:2026-05-06
    GitHub'da uygulama şablonunu görüntüle

    Bu sayfada kullanılabilir bir uygulama şablonu var.

    Vitrin uygulamasını görüntüle

    Bu sayfa şablonun canlı demosuna bağlanır.

    Video eğitimini izleyin

    Bu sayfada bir video eğitimi mevcuttur.

    Bu dokümanı favori AI asistanınıza referans verin
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    Sorunuzu sorun ve bu sayfaya ve seçtiğiniz AI sağlayıcısına referans vererek belgenin bir özetini alın

    Sürüm Geçmişi

    1. "Solid useIntlayer API kullanımını doğrudan özellik erişimine güncelle"
      v8.9.004.05.2026
    2. "Tanstack Start Solid.js için eklendi"
      v8.5.125.03.2026

    Bu sayfanın içeriği bir yapay zeka kullanılarak çevrildi.

    Orijinal içeriğin İngilizce son sürümünü görüntüleyin
    Bu dokümanı düzenle

    Bu dokümantasyonu geliştirmek için bir fikriniz varsa, lütfen GitHub'da bir çekme isteği göndererek katkıda bulunmaktan çekinmeyin.

    Dokümantasyon için GitHub bağlantısı
    Kopyala

    Belge Markdown'ını panoya kopyala

    Intlayer Kullanarak Tanstack Start + Solid.js Web Sitenizi Çevirin | Uluslararasılaştırma (i18n)

    İçindekiler

    Bu kılavuz, Solid.js içeren Tanstack Start projelerinde sorunsuz uluslararasılaştırma, yerel ayara duyarlı yönlendirme, TypeScript desteği ve modern geliştirme uygulamaları için Intlayer'ı nasıl entegre edeceğinizi gösterir.

    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 düzeyinde bildirimsel sözlükler kullanarak çevirileri kolayca yönetebilirsiniz.
    • Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirebilirsiniz.
    • Otomatik olarak oluşturulan türlerle TypeScript desteği sağlayabilir, otomatik tamamlamayı ve hata tespitini iyileştirebilirsiniz.
    • Dinamik yerel ayar algılama ve değiştirme gibi gelişmiş özelliklerden yararlanabilirsiniz.
    • Tanstack Start'ın dosya tabanlı yönlendirme sistemi ile yerel ayara duyarlı yönlendirmeyi etkinleştirebilirsiniz.

    Tanstack Start Uygulamasında Intlayer Kurulumu İçin Adım Adım Kılavuz

    www.youtube.com
    ide.intlayer.org
    intlayer-tanstack-start-solid.vercel.app

    GitHub'daki Uygulama Şablonuna göz atın.

    Adım 1: Proje Oluşturma

    Öncelikle, TanStack Start web sitesindeki Yeni Proje Başlat kılavuzunu izleyerek yeni bir TanStack Start projesi oluşturun.

    Adım 2: Intlayer Paketlerini Kurun

    Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri kurun:

    bash
    Kodu kopyala

    Kodu panoya kopyala

    npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init
    • intlayer

      Yapılandırma yönetimi, çeviri, içerik bildirimi, dönüştürme ve CLI komutları için uluslararasılaştırma araçları sağlayan temel paket.

    • solid-intlayer Intlayer'ı Solid uygulamasına entegre eden paket. Solid uluslararasılaştırması için bağlam sağlayıcıları (context providers) ve hook'lar sunar.

    • vite-intlayer Intlayer'ı Vite paketleyici ile entegre etmek için Vite eklentisini ve kullanıcının tercih ettiği yerel ayarı algılamak, çerezleri yönetmek ve URL yönlendirmesini işlemek için ara yazılımı (middleware) içerir.

    Adım 3: Projenizin Yapılandırılması

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

    intlayer.config.ts
    Kodu kopyala

    Kodu panoya kopyala

    import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;
    Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'leri, ara yazılım yönlendirmesini, çerez adlarını, içerik bildirimlerinizin konumunu ve uzantısını yapılandırabilir, konsoldaki Intlayer günlüklerini devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

    Adım 4: Intlayer'ı Vite Yapılandırmanıza Entegre Edin

    Bite yapılandırmanıza intlayer eklentisini ekleyin:

    vite.config.ts
    Kodu kopyala

    Kodu panoya kopyala

    import { intlayer } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({  plugins: [    devtools(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solidPlugin({ ssr: true }),    intlayer(),  ],});
    intlayer() Vite eklentisi, Intlayer'ı Vite ile entegre etmek için kullanılır. İçerik bildirim dosyalarının oluşturulmasını sağlar ve geliştirme modunda bunları izler. Vite uygulaması içinde Intlayer ortam değişkenlerini tanımlar. Ayrıca, performans yükünü azaltmak için takma adlar (aliases) sağlar.

    Adım 5: Kök Düzeni (Root Layout) Oluşturma

    Geçerli yerel ayarı algılamak için useParams kullanarak ve html etiketinde lang ve dir özelliklerini ayarlayarak kök düzeninizi uluslararasılaştırmayı destekleyecek şekilde yapılandırın.

    src/routes/__root.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import {  HeadContent,  Scripts,  createRootRouteWithContext,} from "@tanstack/solid-router";import { HydrationScript } from "solid-js/web";import { Suspense, type ParentComponent } from "solid-js";import { IntlayerProvider } from "solid-intlayer";import { defaultLocale, getHTMLTextDir } from "intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext()({  shellComponent: RootComponent,});const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      <head>        <HydrationScript />        <HeadContent />      </head>      <body>        <IntlayerProvider locale={locale}>          <Suspense>{props.children}</Suspense>        </IntlayerProvider>        <Scripts />      </body>    </html>  );};

    Adım 6: Yerel Ayar Düzeni Oluşturma (İsteğe Bağlı)

    Yerel ayar önekini işleyen ve doğrulama gerçekleştiren bir düzen oluşturun. Bu düzen, yalnızca geçerli yerel ayarların işlenmesini sağlayacaktır.

    Rota düzeyinde yerel ayar önekini doğrulamanız gerekmiyorsa bu adım isteğe bağlıdır.
    src/routes/{-$locale}/route.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // Yerel ayar önekini doğrula    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },        replace: true,      });    }  },  component: Outlet,});
    Burada, {-$locale} geçerli yerel ayarla değiştirilen dinamik bir rota parametresidir. Bu gösterim, bu slotu isteğe bağlı hale getirerek 'prefix-no-default' vb. yönlendirme modlarıyla çalışmasına olanak tanır.

    Aynı rotada birden fazla dinamik segment kullanırsanız bu slotun sorunlara neden olabileceğini unutmayın (ör: /{-$locale}/other-path/$anotherDynamicPath/...). 'prefix-all' modu için slotu $locale olarak değiştirmeyi tercih edebilirsiniz. 'no-prefix' veya 'search-params' modu için slotu tamamen kaldırabilirsiniz.

    Adım 7: İçeriğinizi Bildirin

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

    src/contents/page.content.ts
    Kodu kopyala

    Kodu panoya kopyala

    import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        en: "About",        es: "Acerca de",        fr: "À propos",      }),      home: t({        en: "Home",        es: "Inicio",        fr: "Accueil",      }),    },    meta: {      title: t({        en: "Welcome to Intlayer + TanStack Router",        es: "Bienvenido a Intlayer + TanStack Router",        fr: "Bienvenue à Intlayer + TanStack Router",      }),      description: t({        en: "This is an example of using Intlayer with TanStack Router",        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",      }),    },  },  key: "app",} satisfies Dictionary;export default appContent;
    İçerik bildirimleriniz, contentDir dizinine (varsayılan olarak ./app) dahil edildiği sürece uygulamanızın herhangi bir yerinde tanımlanabilir. Ve içerik bildirimi dosya uzantısıyla (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs}) eşleşmelidir.
    Daha fazla ayrıntı için içerik bildirimi dokümantasyonuna bakın.

    Adım 8: Yerel Ayara Duyarlı Bileşenleri ve Hook'ları Kullanın

    Yerel ayara duyarlı navigasyon için bir LocalizedLink bileşeni oluşturun:

    src/components/LocalizedLink.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { Link, type LinkProps } from "@tanstack/solid-router";import { getPrefix } from "intlayer";import { useLocale } from "solid-intlayer";import type { JSX } from "solid-js";export const LOCALE_ROUTE = "{-$locale}" as const;export type RemoveLocaleParam<TVal> = TVal extends string  ? RemoveLocaleFromString<TVal>  : TVal;export type To = RemoveLocaleParam<LinkProps["to"]>;type CollapseDoubleSlashes<TString extends string> =  TString extends `${infer THead}//${infer TTail}`    ? CollapseDoubleSlashes<`${THead}/${TTail}`>    : TString;export type LocalizedLinkProps = Omit<LinkProps, "to"> & {  to?: To;} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;type RemoveAll<  TString extends string,  TSub extends string,  McPherson,> = TString extends `${infer THead}${TSub}${infer TTail}`  ? RemoveAll<`${THead}${TTail}`, TSub>  : TString;type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes<  RemoveAll<TString, typeof LOCALE_ROUTE>>;export const LocalizedLink = (props: LocalizedLinkProps) => {  const { locale } = useLocale();  return (    <Link      {...props}      params={{        locale: getPrefix(locale()).localePrefix,        ...(typeof props.params === "object" ? props.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]}    />  );};

    Bu bileşen iki amaca hizmet eder:

    • URL'den gereksiz {-$locale} önekini kaldırmak.
    • Kullanıcının doğrudan yerelleştirilmiş rotaya yönlendirilmesini sağlamak için yerel ayar parametresini URL'ye enjekte etmek.

    Ardından, programatik navigasyon için bir useLocalizedNavigate hook'u oluşturabiliriz:

    src/hooks/useLocalizedNavigate.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { useNavigate } from "@tanstack/solid-router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate = (to: string) => {    const localizedTo = getLocalizedUrl(to, locale());    return navigate({ to: localizedTo });  };  return localizedNavigate;};

    Adım 9: Sayfalarınızda Intlayer'ı Kullanın

    Uygulamanız genelinde içerik sözlüklerinize erişin:

    Yerelleştirilmiş Ana Sayfa

    src/routes/{-$locale}/index.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { createFileRoute } from "@tanstack/solid-router";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "@/components/LocalizedLink";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,});function RouteComponent() {  const content = useIntlayer("index-page");  return (    <main>      <h1>{content.heroTitle}</h1>      <p>{content.heroDesc}</p>      <div>        <LocalizedLink to="/">{content.navHome}</LocalizedLink>        <LocalizedLink to="/about">{content.navAbout}</LocalizedLink>      </div>    </main>  );}
    İçeriğinizi bir string niteliğinde kullanmak istiyorsanız, alt, title, href, aria-label vb. gibi, fonksiyonun değerini çağırmanız gerekir:
    html
    Kodu kopyala

    Kodu panoya kopyala

    <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

    Solid'de, useIntlayer reaktif içerik döndürür (örneğin, content). Özelliklerine doğrudan erişebilirsiniz.

    useIntlayer hook'u hakkında daha fazla bilgi edinmek için dokümantasyona bakın.

    Adım 10: Yerel Ayar Değiştirici Bileşeni Oluşturma

    Kullanıcıların dilleri değiştirmesine olanak tanıyan bir bileşen oluşturun:

    src/components/LocaleSwitcher.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { useLocation } from "@tanstack/solid-router";import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";import { For } from "solid-js";import { useIntlayer, useLocale } from "solid-intlayer";import { LocalizedLink, type To } from "./LocalizedLink";export const LocaleSwitcher = () => {  const content = useIntlayer("locale-switcher");  const location = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = () => getPathWithoutLocale(location().pathname);  return (    <div class="flex flex-row gap-2">      <For each={availableLocales}>        {(localeEl) => (          <LocalizedLink            aria-current={localeEl === locale() ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}            to={pathWithoutLocale() as To}          >            {getLocaleName(localeEl)}          </LocalizedLink>        )}      </For>    </div>  );};export default LocaleSwitcher;

    Solid'de, useLocaledan gelen locale bir signal accessor'dur. Reaktif olarak geçerli değerini okumak için locale() (parantezli) kullanın.

    useLocale hook'u hakkında daha fazla bilgi edinmek için dokümantasyona bakın.

    Adım 11: HTML Özniteliklerinin Yönetimi

    Adım 5'te görüldüğü gibi, kök bileşeninizde useParams kullanarak html etiketinin lang ve dir özniteliklerini yönetebilirsiniz. Bu, hem sunucuda hem de istemcide doğru özniteliklerin ayarlanmasını sağlar.

    src/routes/__root.tsx
    Kodu kopyala

    Kodu panoya kopyala

    const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );};

    Adım 12: Ara Yazılım Ekleme (İsteğe Bağlı)

    Uygulamanıza sunucu tarafı yönlendirmesi eklemek için intlayerProxyyi de kullanabilirsiniz. Bu eklenti, URL'ye göre geçerli yerel ayarı otomatik olarak algılayacak ve uygun yerel ayar çerezini ayarlayacaktır. Herhangi bir yerel ayar belirtilmemişse, eklenti kullanıcının tarayıcı dili tercihlerine göre en uygun yerel ayarı belirleyecektir. Hiçbir yerel ayar algılanmazsa varsayılan yerel ayara yönlendirecektir.

    Üretimde intlayerProxyyi kullanmak için vite-intlayer paketini devDependenciesdan dependenciese taşımanız gerektiğini unutmayın.
    vite.config.ts
    Kodu kopyala

    Kodu panoya kopyala

    import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solid from "vite-plugin-solid";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // Nitro kullanıyorsanız Proxy sunucudan önce yerleştirilmelidir    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solid(),  ],});

    Adım 13: Meta Verilerinizi Uluslararasılaştırın (İsteğe Bağlı)

    Yerel ayara duyarlı meta veriler için head yükleyicisi içindeki içerik sözlüklerinize erişmek için getIntlayer fonksiyonunu da kullanabilirsiniz:

    src/routes/{-$locale}/index.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { createFileRoute } from "@tanstack/solid-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});

    Adım 14: Sunucu aksiyonlarınızda yerel ayarı alın (İsteğe Bağlı)

    Sunucu aksiyonlarınızın veya API uç noktalarınızın içinden geçerli yerel ayara erişmek isteyebilirsiniz. Bunu intlayerdan getLocale yardımcısını kullanarak yapabilirsiniz.

    İşte TanStack Start'ın sunucu fonksiyonlarını kullanan bir örnek:

    src/routes/{-$locale}/index.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { createServerFn } from "@tanstack/solid-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/solid-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // İstekten çerezi al (varsayılan: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // İstekten başlığı al (varsayılan: 'x-intlayer-locale')    // Accept-Language anlaşması kullanılarak geri dönüş (fallback)    getHeader: (name) => getRequestHeader(name),  });  // getIntlayer() ile alınan bazı içerikler  const content = getIntlayer("app", locale);  return { locale, content };});

    Adım 15: Bulunamayan sayfaları yönetme (İsteğe Bağlı)

    Bir kullanıcı var olmayan bir sayfayı ziyaret ettiğinde, özel bir bulunamadı sayfası görüntüleyebilirsiniz ve yerel ayar öneki bulunamadı sayfasının tetiklenme şeklini etkileyebilir.

    TanStack Router'ın yerel ayar önekleriyle 404 işlemesini anlama

    TanStack Router'da, yerelleştirilmiş rotalarla 404 sayfalarını işlemek çok katmanlı bir yaklaşım gerektirir:

    1. Özel 404 rotası: 404 kullanıcı arabirimini görüntülemek için belirli bir rota
    2. Rota düzeyinde doğrulama: Yerel ayar öneklerini doğrular ve geçersiz olanları 404'e yönlendirir
    3. Catch-all rotası: Yerel ayar segmentindeki eşleşmeyen tüm yolları yakalar
    src/routes/{-$locale}/404.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { createFileRoute } from "@tanstack/solid-router";// Bu, özel bir /[locale]/404 rotası oluşturur// Hem doğrudan bir rota olarak kullanılır hem de diğer dosyalarda bir bileşen olarak içe aktarılırexport const Route = createFileRoute("/{-$locale}/404")({  component: NotFoundComponent,});// notFoundComponent ve catch-all rotalarında yeniden kullanılabilmesi için ayrı olarak dışa aktarıldıexport function NotFoundComponent() {  return (    <div>      <h1>404</h1>    </div>  );}
    src/routes/{-$locale}/route.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad, rota işlenmeden (render) önce çalışır (hem sunucu hem istemci)  // Yerel ayar önekini doğrulamak için ideal yerdir  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefix, yerel ayarın intlayer yapılandırmanıza göre geçerli olup olmadığını kontrol eder    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // Geçersiz yerel ayar öneki - geçerli bir yerel ayar önekiyle 404 sayfasına yönlendir      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponent, bir alt rota mevcut olmadığında çağrılır  // ör: /en/var-olmayan-sayfa /en düzeni içinde bunu tetikler  notFoundComponent: NotFoundComponent,});
    src/routes/{-$locale}/$.tsx
    Kodu kopyala

    Kodu panoya kopyala

    import { createFileRoute } from "@tanstack/solid-router";import { NotFoundComponent } from "./404";// $ (splat/catch-all) rotası, diğer rotalarla eşleşmeyen tüm yollarla eşleşir// ör: /en/derin/ic-ice/gecersiz/yol// Bu, bir yerel ayar içindeki TÜM eşleşmeyen yolların 404 sayfasını göstermesini sağlar// Bu olmadan, derin eşleşmeyen yollar boş bir sayfa veya hata gösterebilirexport const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});

    (İsteğe Bağlı) Adım 16: Bileşenlerinizden içeriği çıkartın

    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 çıkartmak için bir derleyici / çıkartıcı önerir.

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

    intlayer.config.ts
    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,
    
        /**
         * Çıkış dosyaları yolunu tanımlar
         */
        output: ({ fileName, extension }) => `./${fileName}${extension}`,
    
        /**
         * Dönüştürüldükten sonra bileşenlerin kaydedilip kaydedilmeyeceğini belirtir.
         *
         * - `true` ise, derleyici diskteki bileşen dosyasını yeniden yazacaktır. Böylece dönüşüm kalıcı olacak ve derleyici bir sonraki işlem için dönüşümü atlayacaktır. Bu şekilde, derleyici uygulamayı dönüştürebilir ve ardından kaldırılabilir.
         *
         * - `false` ise, derleyici `useIntlayer()` fonksiyon çağrısını yalnızca derleme çıktısındaki koda enjekte ederek temel kod tabanını olduğu gibi tutacaktır. Dönüşüm yalnızca bellekte yapılacaktır.
         */
        saveComponents: false,
    
        /**
         * Sözlük anahtarı öneki
         */
        dictionaryKeyPrefix: "",
      },
    };
    
    export default config;

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

    bash
    Kodu kopyala

    Kodu panoya kopyala

    npx intlayer extract

    intlayerCompiler eklentisini dahil etmek için vite.config.ts dosyanızı güncelleyin:

    vite.config.ts
    Kodu kopyala

    Kodu panoya kopyala

    import { intlayer, intlayerCompiler } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({ plugins: [   devtools(),   tanstackStart({     router: {       routeFileIgnorePattern:         ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",     },   }),   solidPlugin({ ssr: true }),   intlayer(),   intlayerCompiler(), ],});
    bash
    Kodu kopyala

    Kodu panoya kopyala

    npm run build # veya npm run dev

    Adım 17: TypeScript'i Yapılandırın (İsteğe Bağlı)

    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.

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

    tsconfig.json
    Kodu kopyala

    Kodu panoya kopyala

    {  // ... mevcut ayarlarınız  include: [    // ... mevcut içerikleriniz (includes)    ".intlayer/**/*.ts", // Otomatik olarak oluşturulan türleri dahil edin  ],}

    Git Yapılandırması

    Intlayer tarafından oluşturulan dosyaların yoksayılması önerilir. Bu, bunları Git deponuza göndermenizi engeller.

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

    .gitignore
    Kodu kopyala

    Kodu panoya kopyala

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

    VS Code Uzantısı

    Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Uzantısını yükleyebilirsiniz.

    VS Code Marketplace'ten Yükle

    Bu uzantı şunları sunar:

    • Çeviri anahtarları için Otomatik Tamamlama.
    • Eksik çeviriler için Gerçek zamanlı hata tespiti.
    • Çevrilmiş içeriğin Satır içi önizlemeleri.
    • Çevirileri kolayca oluşturmak ve güncellemek için Hızlı eylemler.

    Uzantının nasıl kullanılacağı hakkında daha fazla ayrıntı için Intlayer VS Code Uzantısı dokümantasyonuna bakın.


    Daha İleri Gitmek

    Daha ileri gitmek için görsel düzenleyiciyi uygulayabilir veya CMS kullanarak içeriğinizi dışsallaştırabilirsiniz.


    Dokümantasyon Referansları

    • Intlayer Dokümantasyonu
    • Tanstack Start Dokümantasyonu
    • useIntlayer hook'u
    • useLocale hook'u
    • İçerik Bildirimi
    • Yapılandırma
    Tanstack Start
    Astro
    Alt+→

    Bu sayfada

      Tartışmalar anonimdir ve yaygın sorunları ele almak için düzenli olarak incelenir. Özellik fikirleri, belgeleme hakkında geri bildirimler veya Intlayer ile ilgili herhangi bir şeyi paylaşmaktan çekinmeyin, bu girdileri yol haritamızı şekillendirmek ve ürünü geliştirmek için kullanıyoruz.

      npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init
      import type { IntlayerConfig } from "intlayer";import { Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],  },};export default config;
      import { intlayer } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({  plugins: [    devtools(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solidPlugin({ ssr: true }),    intlayer(),  ],});
      import {  HeadContent,  Scripts,  createRootRouteWithContext,} from "@tanstack/solid-router";import { HydrationScript } from "solid-js/web";import { Suspense, type ParentComponent } from "solid-js";import { IntlayerProvider } from "solid-intlayer";import { defaultLocale, getHTMLTextDir } from "intlayer";import { Route as LocaleRoute } from "./{-$locale}/route";export const Route = createRootRouteWithContext()({  shellComponent: RootComponent,});const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      <head>        <HydrationScript />        <HeadContent />      </head>      <body>        <IntlayerProvider locale={locale}>          <Suspense>{props.children}</Suspense>        </IntlayerProvider>        <Scripts />      </body>    </html>  );};
      import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";export const Route = createFileRoute("/{-$locale}")({  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // Yerel ayar önekini doğrula    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },        replace: true,      });    }  },  component: Outlet,});
      import type { Dictionary } from "intlayer";import { t } from "intlayer";const appContent = {  content: {    links: {      about: t({        en: "About",        es: "Acerca de",        fr: "À propos",      }),      home: t({        en: "Home",        es: "Inicio",        fr: "Accueil",      }),    },    meta: {      title: t({        en: "Welcome to Intlayer + TanStack Router",        es: "Bienvenido a Intlayer + TanStack Router",        fr: "Bienvenue à Intlayer + TanStack Router",      }),      description: t({        en: "This is an example of using Intlayer with TanStack Router",        es: "Este es un ejemplo de uso de Intlayer con TanStack Router",        fr: "Ceci est un exemple d'utilisation d'Intlayer avec TanStack Router",      }),    },  },  key: "app",} satisfies Dictionary;export default appContent;
      import { Link, type LinkProps } from "@tanstack/solid-router";import { getPrefix } from "intlayer";import { useLocale } from "solid-intlayer";import type { JSX } from "solid-js";export const LOCALE_ROUTE = "{-$locale}" as const;export type RemoveLocaleParam<TVal> = TVal extends string  ? RemoveLocaleFromString<TVal>  : TVal;export type To = RemoveLocaleParam<LinkProps["to"]>;type CollapseDoubleSlashes<TString extends string> =  TString extends `${infer THead}//${infer TTail}`    ? CollapseDoubleSlashes<`${THead}/${TTail}`>    : TString;export type LocalizedLinkProps = Omit<LinkProps, "to"> & {  to?: To;} & JSX.AnchorHTMLAttributes<HTMLAnchorElement>;type RemoveAll<  TString extends string,  TSub extends string,  McPherson,> = TString extends `${infer THead}${TSub}${infer TTail}`  ? RemoveAll<`${THead}${TTail}`, TSub>  : TString;type RemoveLocaleFromString<TString extends string> = CollapseDoubleSlashes<  RemoveAll<TString, typeof LOCALE_ROUTE>>;export const LocalizedLink = (props: LocalizedLinkProps) => {  const { locale } = useLocale();  return (    <Link      {...props}      params={{        locale: getPrefix(locale()).localePrefix,        ...(typeof props.params === "object" ? props.params : {}),      }}      to={`/${LOCALE_ROUTE}${props.to ?? ""}` as LinkProps["to"]}    />  );};
      import { useNavigate } from "@tanstack/solid-router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";export const useLocalizedNavigate = () => {  const navigate = useNavigate();  const { locale } = useLocale();  const localizedNavigate = (to: string) => {    const localizedTo = getLocalizedUrl(to, locale());    return navigate({ to: localizedTo });  };  return localizedNavigate;};
      import { createFileRoute } from "@tanstack/solid-router";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "@/components/LocalizedLink";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,});function RouteComponent() {  const content = useIntlayer("index-page");  return (    <main>      <h1>{content.heroTitle}</h1>      <p>{content.heroDesc}</p>      <div>        <LocalizedLink to="/">{content.navHome}</LocalizedLink>        <LocalizedLink to="/about">{content.navAbout}</LocalizedLink>      </div>    </main>  );}
      <img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />
      import { useLocation } from "@tanstack/solid-router";import { getLocaleName, getPathWithoutLocale, getPrefix } from "intlayer";import { For } from "solid-js";import { useIntlayer, useLocale } from "solid-intlayer";import { LocalizedLink, type To } from "./LocalizedLink";export const LocaleSwitcher = () => {  const content = useIntlayer("locale-switcher");  const location = useLocation();  const { availableLocales, locale, setLocale } = useLocale();  const pathWithoutLocale = () => getPathWithoutLocale(location().pathname);  return (    <div class="flex flex-row gap-2">      <For each={availableLocales}>        {(localeEl) => (          <LocalizedLink            aria-current={localeEl === locale() ? "page" : undefined}            onClick={() => setLocale(localeEl)}            params={{ locale: getPrefix(localeEl).localePrefix }}            to={pathWithoutLocale() as To}          >            {getLocaleName(localeEl)}          </LocalizedLink>        )}      </For>    </div>  );};export default LocaleSwitcher;
      const RootComponent: ParentComponent = (props) => {  const params = LocaleRoute.useParams();  const locale = params()?.locale ?? defaultLocale;  return (    <html dir={getHTMLTextDir(locale)} lang={locale}>      {/* ... */}    </html>  );};
      import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solid from "vite-plugin-solid";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({  plugins: [    intlayerProxy(), // Nitro kullanıyorsanız Proxy sunucudan önce yerleştirilmelidir    nitro(),    intlayer(),    tanstackStart({      router: {        routeFileIgnorePattern:          ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",      },    }),    solid(),  ],});
      import { createFileRoute } from "@tanstack/solid-router";import { getIntlayer } from "intlayer";export const Route = createFileRoute("/{-$locale}/")({  component: RouteComponent,  head: ({ params }) => {    const { locale } = params;    const path = "/"; // The path for this route    const metaContent = getIntlayer("app", locale);    return {      links: [        // Canonical link: Points to the current localized page        { rel: "canonical", href: getLocalizedUrl(path, locale) },        // Hreflang: Tell Google about all localized versions        ...localeMap(({ locale: mapLocale }) => ({          rel: "alternate",          hrefLang: mapLocale,          href: getLocalizedUrl(path, mapLocale),        })),        // x-default: For users in unmatched languages        // Define the default fallback locale (usually your primary language)        {          rel: "alternate",          hrefLang: "x-default",          href: getLocalizedUrl(path, defaultLocale),        },      ],      meta: [        { title: metaContent.title },        { name: "description", content: metaContent.meta.description },      ],    };  },});
      import { createServerFn } from "@tanstack/solid-start";import {  getRequestHeader,  getRequestHeaders,} from "@tanstack/solid-start/server";import { getCookie, getIntlayer, getLocale } from "intlayer";export const getLocaleServer = createServerFn().handler(async () => {  const locale = await getLocale({    // İstekten çerezi al (varsayılan: 'INTLAYER_LOCALE')    getCookie: (name) => {      const cookieString = getRequestHeader("cookie");      return getCookie(name, cookieString);    },    // İstekten başlığı al (varsayılan: 'x-intlayer-locale')    // Accept-Language anlaşması kullanılarak geri dönüş (fallback)    getHeader: (name) => getRequestHeader(name),  });  // getIntlayer() ile alınan bazı içerikler  const content = getIntlayer("app", locale);  return { locale, content };});
      import { createFileRoute } from "@tanstack/solid-router";// Bu, özel bir /[locale]/404 rotası oluşturur// Hem doğrudan bir rota olarak kullanılır hem de diğer dosyalarda bir bileşen olarak içe aktarılırexport const Route = createFileRoute("/{-$locale}/404")({  component: NotFoundComponent,});// notFoundComponent ve catch-all rotalarında yeniden kullanılabilmesi için ayrı olarak dışa aktarıldıexport function NotFoundComponent() {  return (    <div>      <h1>404</h1>    </div>  );}
      import { createFileRoute, Outlet, redirect } from "@tanstack/solid-router";import { validatePrefix } from "intlayer";import { NotFoundComponent } from "./404";export const Route = createFileRoute("/{-$locale}")({  // beforeLoad, rota işlenmeden (render) önce çalışır (hem sunucu hem istemci)  // Yerel ayar önekini doğrulamak için ideal yerdir  beforeLoad: ({ params }) => {    const localeParam = params.locale;    // validatePrefix, yerel ayarın intlayer yapılandırmanıza göre geçerli olup olmadığını kontrol eder    const { isValid, localePrefix } = validatePrefix(localeParam);    if (!isValid) {      // Geçersiz yerel ayar öneki - geçerli bir yerel ayar önekiyle 404 sayfasına yönlendir      throw redirect({        to: "/{-$locale}/404",        params: { locale: localePrefix },      });    }  },  component: Outlet,  // notFoundComponent, bir alt rota mevcut olmadığında çağrılır  // ör: /en/var-olmayan-sayfa /en düzeni içinde bunu tetikler  notFoundComponent: NotFoundComponent,});
      import { createFileRoute } from "@tanstack/solid-router";import { NotFoundComponent } from "./404";// $ (splat/catch-all) rotası, diğer rotalarla eşleşmeyen tüm yollarla eşleşir// ör: /en/derin/ic-ice/gecersiz/yol// Bu, bir yerel ayar içindeki TÜM eşleşmeyen yolların 404 sayfasını göstermesini sağlar// Bu olmadan, derin eşleşmeyen yollar boş bir sayfa veya hata gösterebilirexport const Route = createFileRoute("/{-$locale}/$")({  component: NotFoundComponent,});
      npx intlayer extract
      import { intlayer, intlayerCompiler } from "vite-intlayer";import { defineConfig } from "vite";import { devtools } from "@tanstack/devtools-vite";import { tanstackStart } from "@tanstack/solid-start/plugin/vite";import solidPlugin from "vite-plugin-solid";export default defineConfig({ plugins: [   devtools(),   tanstackStart({     router: {       routeFileIgnorePattern:         ".content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5)$",     },   }),   solidPlugin({ ssr: true }),   intlayer(),   intlayerCompiler(), ],});
      npm run build # veya npm run dev
      {  // ... mevcut ayarlarınız  include: [    // ... mevcut içerikleriniz (includes)    ".intlayer/**/*.ts", // Otomatik olarak oluşturulan türleri dahil edin  ],}
      # Intlayer tarafından oluşturulan dosyaları yoksay.intlayer