Bu kılavuz, sunucu tarafında işlenen (server-rendered) bir SolidStart uygulamasını kapsar: yerel ayar algılaması istek üzerine gerçekleşir, sayfalar sunucuda doğru dille işlenir ve arama motorlarının ihtiyaç duyduğu <html lang>, hreflang ve sitemap sinyalleri sunucu tarafında oluşturulur.

Neden alternatifler yerine Intlayer?

@solid-primitives/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:

Intlayer, bileşen düzeyinde içerik kapsamı, reaktif çeviriler ve uluslararasılaştırmayı (i18n) ölçeklendirmek için gereken tüm özellikleri sunarak Solid ile mükemmel şekilde çalışacak şekilde optimize edilmiştir.

Sayfalarınıza devasa JSON dosyaları yüklemek yerine yalnızca gerekli içeriği yükleyin. Intlayer, paket ve sayfa boyutlarınızı %50'ye kadar azaltmaya yardımcı olur.

Uygulamanızın içeriğini kapsamlara ayırmak, büyük ölçekli uygulamalar için bakımı kolaylaştırır. Tüm içerik kod tabanınızı gözden geçirme zihinsel yükü olmadan tek bir özellik klasörünü kopyalayabilir veya silebilirsiniz. Ayrıca Intlayer, içeriğinizin doğruluğunu sağlamak için tamamen tiplendirilmiştir (fully typed).

İçeriği aynı yerde konumlandırmak, Büyük Dil Modelleri (LLM'ler) için gereken bağlamı azaltır. Intlayer ayrıca yapay zeka ajanları için geliştirici deneyimini (DX) daha da sorunsuz hale getirmek amacıyla eksik çevirileri test etmek için CLI, LSP, MCP ve agent skills gibi bir dizi araçla birlikte gelir.

AI sağlayıcınızın maliyetiyle seçtiğiniz LLM'yi kullanarak CI/CD işlem hattınızda çeviri yapmak için otomasyonu kullanın. Intlayer ayrıca içerik çıkarmayı otomatikleştirmek için bir derleyici (compiler) ve arka planda çeviri yapmaya yardımcı olacak bir web platformu sunar.

Devasa JSON dosyalarını bileşenlere bağlamak performans ve reaktivite sorunlarına yol açabilir. Intlayer, derleme süresinde (build time) içerik yüklemenizi optimize eder.

Bir i18n çözümünden daha fazlası olan Intlayer, çevirmenler, reklam yazarları ve diğer ekip üyeleriyle iş birliğini sorunsuz hale getirmek için çok dilli içeriğinizi gerçek zamanlı yönetmenize yardımcı olan kendi sunucunuzda barındırılan bir görsel editör ve tam bir CMS sağlar. İçerik yerel ve/veya uzaktan depolanabilir.

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

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

npm kullanarak gerekli paketleri yükleyin:
bash
Kodu kopyala
Kodu panoya kopyala
npx intlayer init --interactive
npx intlayer init --interactive
--interactive bayrağı isteğe bağlıdır. Yapay zeka ajanıysanız intlayer-cli init kullanın.

Bu komut ortamınızı algılayacak ve gerekli paketleri yükleyecektir. Örneğin:
bash
Kodu kopyala
Kodu panoya kopyala
npm install intlayer solid-intlayer vite-intlayer
npm install intlayer solid-intlayer vite-intlayer
- intlayer
  
  Yapılandırma yönetimi, çeviri, içerik bildirimi, dönüştürme (transpilation) ve CLI komutları için uluslararasılaştırma araçları sağlayan temel paket.
- solid-intlayer
  
  Intlayer'ı Solid uygulamasıyla 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 paketleyicisi ile entegre etmek için Vite eklentisini ve kullanıcının tercih ettiği yerel ayarı algılayan, çerezleri yöneten ve URL yönlendirmesini işleyen yerel ayar yönlendirme işleyicisini içerir.
Buradaki vite-intlayer yalnızca bir derleme zamanı konusu değil, aynı zamanda sunucu tarafı bir konudur: SolidStart'ın Nitro sunucusunun çalıştırdığı istek işleyicisini sağlar. Bunu dependencies içinde tutmak güvenli varsayılandır — yalnızca Nitro'nun işleyiciyi satır içine aldığı oluşturulmuş .output dizinini dağıtırsanız bunu devDependencies kısmına taşıyabilirsiniz.
2
Projenizin Yapılandırılması

Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:
intlayer.config.ts
Kodu kopyala
Kodu panoya kopyala
```
import { type IntlayerConfig, Locales } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // Diğer yerel ayarlarınız
    ],
    defaultLocale: Locales.ENGLISH,
  },
  routing: {
    mode: "prefix-no-default",
  },
};

export default config;
```
prefix-no-default ile varsayılan yerel ayar, ön ek içermeyen URL'lerden sunulur:
plaintext
Kodu kopyala
Kodu panoya kopyala
/ /about → İngilizce (varsayılan yerel ayar)/fr /fr/about → Fransızca/es /es/about → İspanyolca
/ /about → İngilizce (varsayılan yerel ayar)/fr /fr/about → Fransızca/es /es/about → İspanyolca
Bu yapılandırma dosyası aracılığıyla yerelleştirilmiş URL'ler, ara yazılım (middleware) yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı ayarlayabilir, konsoldaki Intlayer günlüklerini devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.
3
Vite Yapılandırmanıza Intlayer'ı Entegre Edin

Intlayer eklentisini yapılandırmanıza ekleyin:
vite.config.ts
Kodu kopyala
Kodu panoya kopyala
```
import { solidStart } from "@solidjs/start/config";
import { nitro } from "nitro/vite";
import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [solidStart(), nitro(), intlayer()],
});
```
intlayer() Vite eklentisi içerik bildirimi dosyalarınızı oluşturur, geliştirme modunda bunları izler ve uygulama içinde Intlayer ortam değişkenlerini tanımlar. Ayrıca performansı optimize eden takma adlar (aliases) sağlar.

Yerel ayar yönlendirmesi eklentiyle birlikte gelir
SolidStart Nitro üzerinde çalışır ve intlayer(), yerel ayar yönlendirme işleyicisini doğrudan Nitro'nun sunucu hattına kaydeder (varsayılan olarak true olan routing.enableProxy seçeneği aracılığıyla). Başka bir şey bağlamanıza gerek yok: oluşturulmuş bir sunucuda, her istek yönlendiriciye ulaşmadan önce denetlenir ve
- yerel ayar URL ön ekinden, ardından INTLAYER_LOCALE çerezinden, ardından Accept-Language üst bilgisinden okunur;
- ön eki olmayan bir URL, çözümlenen yerel ayar varsayılan yerel ayar olmadığında yerelleştirilmiş karşılığına yönlendirilir (/ → /fr);
- gereksiz ön eke sahip bir URL, kurallı (canonical) biçimine geri yönlendirilir (/en/about → /about);
- yerel ayar çerezi yanıta geri yazılır.
4
İçeriğinizi Bildirin

Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:
src/contents/home.content.ts
Kodu kopyala
Kodu panoya kopyala
```
import { type Dictionary, t } from "intlayer";

const homeContent = {
  key: "home-page",
  content: {
    title: t({
      en: "Hello world!",
      fr: "Bonjour le monde !",
      es: "¡Hola mundo!",
    }),
    metaTitle: "SolidStart + Intlayer",
    metaDescription: t({
      en: "A SolidStart application internationalized with Intlayer.",
      fr: "Une application SolidStart internationalisée avec Intlayer.",
      es: "Una aplicación SolidStart internacionalizada con Intlayer.",
    }),
    documentation: t({
      en: "Visit start.solidjs.com to learn how to build SolidStart apps.",
      fr: "Visitez start.solidjs.com pour apprendre à créer des applications SolidStart.",
      es: "Visita start.solidjs.com para aprender a crear aplicaciones SolidStart.",
    }),
  },
} satisfies Dictionary;

export default homeContent;
```
⚠️ SolidStart'a özgü püf noktası: src/routes altındaki her .ts / .tsx dosyası bir rota haline gelir ve bir .content.ts dosyası varsayılan dışa aktarmaya sahip olduğundan sayfa olarak algılanır. Sayfalarınızın içerik bildirimlerini rotalar dizininin dışında tutun (src/contents/ iyi çalışır). File-system yönlendiricisi src/components dizinini taramadığı için bileşenlerin içeriği aynı yerde kalabilir.

İçerik bildirimleriniz contentDir dizinine (varsayılan olarak ./src) dahil edildiği ve içerik bildirimi dosya uzantısıyla eşleştiği sürece (varsayılan olarak .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) uygulamanızın herhangi bir yerinde tanımlanabilir.

Daha fazla ayrıntı için içerik bildirimi dokümantasyonuna bakın.

Yerelleştirilmiş yönlendirme ekleyin

Bu adımın amacı, her dile kendi URL'sini vermektir; arama motorlarının dizine eklediği şey de budur.

Sayfalarınızı isteğe bağlı dinamik bir segment altına taşıyın. SolidStart'ın file-system yönlendiricisinde [[locale]] :locale? yol kalıbına derlenir:

plaintext

Kodu kopyala

Kodu panoya kopyala

src/routes/  [[locale]].tsx          ← segmenti doğrulayan düzen (layout)  [[locale]]/    index.tsx             → /        ve /fr        ve /es    about.tsx             → /about   ve /fr/about  ve /es/about  [...404].tsx            → diğer her şey için tümünü yakalama

src/routes/  [[locale]].tsx          ← segmenti doğrulayan düzen (layout)  [[locale]]/    index.tsx             → /        ve /fr        ve /es    about.tsx             → /about   ve /fr/about  ve /es/about  [...404].tsx            → diğer her şey için tümünü yakalama

Düzen dosyasının tek görevi, segmenti yapılandırılmış bir yerel ayarla sınırlandırmaktır:

src/routes/[[locale]].tsx

Kodu kopyala

Kodu panoya kopyala

import type { RouteSectionProps } from "@solidjs/router";import { locales } from "intlayer";export const route = {  matchFilters: {    locale: locales,  },};export default function LocaleLayout(props: RouteSectionProps) {  return <>{props.children}</>;}

import type { RouteSectionProps } from "@solidjs/router";import { locales } from "intlayer";export const route = {  matchFilters: {    locale: locales,  },};export default function LocaleLayout(props: RouteSectionProps) {  return <>{props.children}</>;}

@solidjs/router, :locale? kalıbını iki kalıba genişletir — biri segmentli, diğeri segmentsiz — ve bunları azalan özgüllüğe göre dener. matchFilters, çalışan bir kurulum ile kafa karıştırıcı bir kurulum arasındaki farkı yaratan şeydir:

Tüm tablo içeriğini göster

Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

URL	matchFilters olmadan	matchFilters ile
`/fr/about`	Fransızca hakkında sayfası	Fransızca hakkında sayfası
`/about`	Hakkında sayfası (statik segment kazanır)	Hakkında sayfası
`/unknown`	Ana sayfa, sessizce, `locale=unknown` ile	Eşleşme yok → tümünü yakalayan 404'e düşer

'prefix-all' yönlendirme modunu kullanıyorsanız [[locale]] yerine [locale] (gerekli) kullanmayı tercih edin ve 'no-prefix' veya 'search-params' için segmenti tamamen kaldırın.

Yerel ayarı uygulamanıza sağlayın

URL, yerel ayar için tek doğruluk kaynağıdır: ara yazılım (middleware) isteği yerelleştirilmiş yoluna zaten yönlendirmiştir, bu nedenle kök düzende (root layout) yolu okumak sunucu oluşturma ile istemci hidrasyonunu (hydration) uyumlu tutar ve her istemci tarafı gezinmenin yerel ayarı ücretsiz olarak güncellemesini sağlar.

src/app.tsx

Kodu kopyala

Kodu panoya kopyala

import { MetaProvider } from "@solidjs/meta";import { Router, useLocation } from "@solidjs/router";import { FileRoutes } from "@solidjs/start/router";import { defaultLocale, getHTMLTextDir, getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "solid-intlayer";import { createEffect, type ParentProps, Suspense } from "solid-js";import { isServer } from "solid-js/web";import { Nav } from "~/components/Nav";import "./app.css";const RootLayout = (props: ParentProps) => {  const location = useLocation();  const locale = () => getLocaleFromPath(location.pathname) ?? defaultLocale;  // Sunucu <html> öğesini entry-server.tsx içinde işler;  // yerel ayarlar arasındaki istemci tarafı gezinmeler öznitelikleri kendileri güncellemelidir.  createEffect(() => {    if (isServer) return;    document.documentElement.lang = locale();    document.documentElement.dir = getHTMLTextDir(locale());  });  return (    <MetaProvider>      <IntlayerProvider locale={locale()}>        <Nav />        <Suspense>{props.children}</Suspense>      </IntlayerProvider>    </MetaProvider>  );};export default function App() {  return (    <Router root={RootLayout}>      <FileRoutes />    </Router>  );}

import { MetaProvider } from "@solidjs/meta";import { Router, useLocation } from "@solidjs/router";import { FileRoutes } from "@solidjs/start/router";import { defaultLocale, getHTMLTextDir, getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "solid-intlayer";import { createEffect, type ParentProps, Suspense } from "solid-js";import { isServer } from "solid-js/web";import { Nav } from "~/components/Nav";import "./app.css";const RootLayout = (props: ParentProps) => {  const location = useLocation();  const locale = () => getLocaleFromPath(location.pathname) ?? defaultLocale;  // Sunucu <html> öğesini entry-server.tsx içinde işler;  // yerel ayarlar arasındaki istemci tarafı gezinmeler öznitelikleri kendileri güncellemelidir.  createEffect(() => {    if (isServer) return;    document.documentElement.lang = locale();    document.documentElement.dir = getHTMLTextDir(locale());  });  return (    <MetaProvider>      <IntlayerProvider locale={locale()}>        <Nav />        <Suspense>{props.children}</Suspense>      </IntlayerProvider>    </MetaProvider>  );};export default function App() {  return (    <Router root={RootLayout}>      <FileRoutes />    </Router>  );}

IntlayerProvider, locale prop'una yanıt verir, bu nedenle JSX içinde erişimci çağrısı locale() geçirmek yeterlidir — Solid bunu bir getter'a derler ve URL değiştiğinde tüm ağaç yeni dilde yeniden işlenir.

Sunucuda HTML lang ve dir özniteliklerini ayarlayın

<html> öğesi, Router dışında entry-server.tsx tarafından işlenir. Bunun yerine yerel ayarı istek URL'sinden okuyun:

src/entry-server.tsx

Kodu kopyala

Kodu panoya kopyala

// @refresh reloadimport { createHandler, StartServer } from "@solidjs/start/server";import { defaultLocale, getHTMLTextDir, getLocaleFromPath } from "intlayer";import { getRequestEvent } from "solid-js/web";export default createHandler(() => (  <StartServer    document={({ assets, children, scripts }) => {      const url = getRequestEvent()?.request.url ?? "/";      const locale = getLocaleFromPath(url) ?? defaultLocale;      return (        <html dir={getHTMLTextDir(locale)} lang={locale}>          <head>            <meta charset="utf-8" />            <meta              name="viewport"              content="width=device-width, initial-scale=1"            />            <link rel="icon" href="/favicon.ico" />            {assets}          </head>          <body>            <div id="app">{children}</div>            {scripts}          </body>        </html>      );    }}  />));

// @refresh reloadimport { createHandler, StartServer } from "@solidjs/start/server";import { defaultLocale, getHTMLTextDir, getLocaleFromPath } from "intlayer";import { getRequestEvent } from "solid-js/web";export default createHandler(() => (  <StartServer    document={({ assets, children, scripts }) => {      const url = getRequestEvent()?.request.url ?? "/";      const locale = getLocaleFromPath(url) ?? defaultLocale;      return (        <html dir={getHTMLTextDir(locale)} lang={locale}>          <head>            <meta charset="utf-8" />            <meta              name="viewport"              content="width=device-width, initial-scale=1"            />            <link rel="icon" href="/favicon.ico" />            {assets}          </head>          <body>            <div id="app">{children}</div>            {scripts}          </body>        </html>      );    }}  />));

Arama motoru tarayıcıları (crawlers) artık ilk baytta doğru dili alır:

html

Kodu kopyala

Kodu panoya kopyala

<html dir="ltr" lang="fr"></html>

<html dir="ltr" lang="fr"></html>

Sayfalarınızda Intlayer Kullanın

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

src/routes/[[locale]]/index.tsx

Kodu kopyala

Kodu panoya kopyala

import { Meta, Title } from "@solidjs/meta";import { useIntlayer } from "solid-intlayer";import Counter from "~/components/Counter";export default function Home() {  const content = useIntlayer("home-page");  return (    <main>      <Title>{content.metaTitle.value}</Title>      <Meta content={content.metaDescription.value} name="description" />      <h1>{content.title}</h1>      <Counter />      <p>{content.documentation}</p>    </main>  );}

import { Meta, Title } from "@solidjs/meta";import { useIntlayer } from "solid-intlayer";import Counter from "~/components/Counter";export default function Home() {  const content = useIntlayer("home-page");  return (    <main>      <Title>{content.metaTitle.value}</Title>      <Meta content={content.metaDescription.value} name="description" />      <h1>{content.title}</h1>      <Counter />      <p>{content.documentation}</p>    </main>  );}

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

İçerğinizi alt, title, href, aria-label vb. gibi bir string özniteliğinde kullanmak istiyorsanız, fonksiyonun değerini şu şekilde kullanabilirsiniz:
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)}" />
<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)}" />

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

İçerik düğümleri yalnızca düz çevirilerle sınırlı değildir. Örneğin çoğullaştırılmış bir sayaç:

src/components/Counter.content.ts

Kodu kopyala

Kodu panoya kopyala

import { type Dictionary, plural, t } from "intlayer";const counterContent = {  key: "counter",  content: {    clicks: plural({      one: t({        en: "{{count}} click",        fr: "{{count}} clic",        es: "{{count}} clic",      }),      other: t({        en: "{{count}} clicks",        fr: "{{count}} clics",        es: "{{count}} clics",      }),    }),  },} satisfies Dictionary;export default counterContent;

import { type Dictionary, plural, t } from "intlayer";const counterContent = {  key: "counter",  content: {    clicks: plural({      one: t({        en: "{{count}} click",        fr: "{{count}} clic",        es: "{{count}} clic",      }),      other: t({        en: "{{count}} clicks",        fr: "{{count}} clics",        es: "{{count}} clics",      }),    }),  },} satisfies Dictionary;export default counterContent;

src/components/Counter.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "solid-intlayer";import { createSignal } from "solid-js";export default function Counter() {  const [count, setCount] = createSignal(0);  const content = useIntlayer("counter");  return (    <button onClick={() => setCount(count() + 1)} type="button">      {content.clicks(count())}    </button>  );}

import { useIntlayer } from "solid-intlayer";import { createSignal } from "solid-js";export default function Counter() {  const [count, setCount] = createSignal(0);  const content = useIntlayer("counter");  return (    <button onClick={() => setCount(count() + 1)} type="button">      {content.clicks(count())}    </button>  );}

plural(), etkin yerel ayar için Intl.PluralRules aracılığıyla kategoriyi seçer, bu nedenle ikiden fazla çoğul biçimine sahip diller herhangi bir ekstra kod olmadan çalışır.

Yerelleştirilmiş Bir Bağlantı (Link) Bileşeni Oluşturun

İç URL'lere otomatik olarak geçerli dili ön ek olarak ekleyen özel bir Link bileşeni oluşturun:

src/components/LocalizedLink.tsx

Kodu kopyala

Kodu panoya kopyala

import { A, type AnchorProps } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";import type { ParentComponent } from "solid-js";export const LocalizedLink: ParentComponent<AnchorProps> = (props) => {  const { locale } = useLocale();  const isExternal = () => /^[a-z][a-z0-9+.-]*:/i.test(props.href);  const localizedHref = () =>    isExternal() ? props.href : getLocalizedUrl(props.href, locale());  return <A {...props} href={localizedHref()} />;};

import { A, type AnchorProps } from "@solidjs/router";import { getLocalizedUrl } from "intlayer";import { useLocale } from "solid-intlayer";import type { ParentComponent } from "solid-js";export const LocalizedLink: ParentComponent<AnchorProps> = (props) => {  const { locale } = useLocale();  const isExternal = () => /^[a-z][a-z0-9+.-]*:/i.test(props.href);  const localizedHref = () =>    isExternal() ? props.href : getLocalizedUrl(props.href, locale());  return <A {...props} href={localizedHref()} />;};

src/components/Nav.tsx

Kodu kopyala

Kodu panoya kopyala

import { useIntlayer } from "solid-intlayer";import type { Component } from "solid-js";import { LocaleSwitcher } from "./LocaleSwitcher";import { LocalizedLink } from "./LocalizedLink";export const Nav: Component = () => {  const content = useIntlayer("nav");  return (    <nav>      <LocalizedLink href="/">{content.home}</LocalizedLink>      <LocalizedLink href="/about">{content.about}</LocalizedLink>      <LocaleSwitcher />    </nav>  );};

import { useIntlayer } from "solid-intlayer";import type { Component } from "solid-js";import { LocaleSwitcher } from "./LocaleSwitcher";import { LocalizedLink } from "./LocalizedLink";export const Nav: Component = () => {  const content = useIntlayer("nav");  return (    <nav>      <LocalizedLink href="/">{content.home}</LocalizedLink>      <LocalizedLink href="/about">{content.about}</LocalizedLink>      <LocaleSwitcher />    </nav>  );};

Bir kez href="/about" yazmak artık etkin yerel ayara bağlı olarak /about, /fr/about veya /es/about üretir — sayfalarınızın hiçbir yerinde manuel ön ek eklemeye gerek kalmaz.

10
Bir Yerel Ayar Değiştirici (Locale Switcher) Bileşeni Oluşturun

Değiştiriciyi bir <select> yerine gerçek bağlantılar (anchors) olarak işleyin: geçerli sayfanın her dili, yeni bir sekmede açılabilen taranabilir bir bağlantı haline gelir ki bu yalnızca JavaScript ile çalışan bir denetimin sunamayacağı bir şeydir.

getPathWithoutLocale yerel ayar segmentini geçerli yoldan kaldırır ve getLocalizedUrl bunu hedef yerel ayar için yeniden oluşturur, böylece bağlantılar hiçbir şeyi sabit kodlamadan yönlendirme modunuzu takip eder. Gezinme, işlenen yerel ayarı değiştiren şeydir — [[locale]] rotası bunu URL'den türetir — bu sırada setLocale seçimi INTLAYER_LOCALE çerezinde saklar, böylece yerel ayarsız bir URL'ye daha sonra yapılan bir ziyaret aynı dilde çözümlenir.
src/components/LocaleSwitcher.tsx
Kodu kopyala
Kodu panoya kopyala
```
import { A, useLocation } from "@solidjs/router";
import {
  getHTMLTextDir,
  getLocaleName,
  getLocalizedUrl,
  getPathWithoutLocale,
} from "intlayer";
import { useIntlayer, useLocale } from "solid-intlayer";
import { type Component, For } from "solid-js";

export const LocaleSwitcher: Component = () => {
  const content = useIntlayer("locale-switcher");
  const location = useLocation();
  const { locale, setLocale, availableLocales } = useLocale();

  // Şu anda görüntülenen sayfanın kurallı (yerel ayarsız) yolu
  const pathWithoutLocale = () => getPathWithoutLocale(location.pathname);

  return (
    <div>
      <button
        aria-label={content.label.value}
        popoverTarget="localePopover"
        type="button"
      >
        {getLocaleName(locale())}
      </button>
      <div id="localePopover" popover="auto">
        <For each={availableLocales}>
          {(localeItem) => (
            <A
              dir={getHTMLTextDir(localeItem)}
              // Yalnızca tam eşleşme, böylece varsayılan yerel ayar bağlantısı
              // her sayfada etkin olarak işaretlenmez
              end
              href={getLocalizedUrl(pathWithoutLocale(), localeItem)}
              hreflang={localeItem}
              lang={localeItem}
              onClick={() => setLocale(localeItem)}
              // Tarayıcının "geri" düğmesinin önceki sayfaya dönmesini sağlar
              replace
            >
              {/* Kendi dilinde dil adı - örneğin Français */}
              {getLocaleName(localeItem)}
            </A>
          )}
        </For>
      </div>
    </div>
  );
};
```
Solid'de useLocale içindeki locale bir signal erişimcisidir. Mevcut değerini reaktif olarak okumak için locale() (parantezler ile) kullanın.

getLocaleName(localeItem) her dili kendi dilinde işler — English / Français / Español. İsimleri şu anda görüntülenen dile çevirmek için ikinci bir bağımsız değişken geçirin: getLocaleName(localeItem, locale()), İngilizce'de English / French / Spanish, Fransızca'da anglais / français / espagnol verir.

<A> zaten geçerli URL ile eşleşen bağlantıda aria-current="page" ayarlar, bu nedenle bunun için eklenecek bir şey yoktur. replace, işlenen öznitelikten yönlendirici tarafından geri okunur: bir geçmiş girdisi eklemek yerine onu değiştirir, böylece tarayıcının "geri" düğmesi önceki dildeki aynı sayfaya değil, geçişten önce ziyaret edilen sayfaya geri döner.

Her bağlantıdaki dir ve hreflang, sağdan sola dillerin isimlerini doğru şekilde yönlendirir ve yardımcı teknolojilere ve arama motoru tarayıcılarına her bağlantının hangi dili işaret ettiğini bildirir.

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

Kurallı (canonical) ve hreflang bağlantılarını yayınlayın

İsteğe bağlı

hreflang açıklamaları arama motorlarına /about, /fr/about ve /es/about sayfalarının farklı dillerdeki aynı sayfa olduğunu bildirir. getMultilingualUrls, yönlendirme modunuzu izleyerek bunları kurallı (yerel ayarsız) yoldan türetir, böylece hiçbir şey sabit kodlanmaz:

src/components/AlternateLinks.tsx

Kodu kopyala

Kodu panoya kopyala

import {  defaultLocale,  getMultilingualUrls,  getPathWithoutLocale,} from "intlayer";import { type Component, For } from "solid-js";export type AlternateLinksProps = {  /** İşlenen sayfanın mutlak URL'si. */  url: string;};export const AlternateLinks: Component<AlternateLinksProps> = (props) => {  const multilingualUrls = () => {    const { origin, pathname } = new URL(props.url);    return Object.entries(      getMultilingualUrls(`${origin}${getPathWithoutLocale(pathname)}`)    );  };  const canonicalUrl = () =>    new URL(props.url).origin + new URL(props.url).pathname;  return (    <>      <link href={canonicalUrl()} rel="canonical" />      <For each={multilingualUrls()}>        {([locale, localizedUrl]) => (          <link href={localizedUrl} hreflang={locale} rel="alternate" />        )}      </For>      <link        href={          multilingualUrls().find(([locale]) => locale === defaultLocale)?.[1]        }        hreflang="x-default"        rel="alternate"      />    </>  );};

import {  defaultLocale,  getMultilingualUrls,  getPathWithoutLocale,} from "intlayer";import { type Component, For } from "solid-js";export type AlternateLinksProps = {  /** İşlenen sayfanın mutlak URL'si. */  url: string;};export const AlternateLinks: Component<AlternateLinksProps> = (props) => {  const multilingualUrls = () => {    const { origin, pathname } = new URL(props.url);    return Object.entries(      getMultilingualUrls(`${origin}${getPathWithoutLocale(pathname)}`)    );  };  const canonicalUrl = () =>    new URL(props.url).origin + new URL(props.url).pathname;  return (    <>      <link href={canonicalUrl()} rel="canonical" />      <For each={multilingualUrls()}>        {([locale, localizedUrl]) => (          <link href={localizedUrl} hreflang={locale} rel="alternate" />        )}      </For>      <link        href={          multilingualUrls().find(([locale]) => locale === defaultLocale)?.[1]        }        hreflang="x-default"        rel="alternate"      />    </>  );};

İstek URL'sinin mevcut olduğu belge head kısmında işleyin:

src/entry-server.tsx

Kodu kopyala

Kodu panoya kopyala

import { AlternateLinks } from "~/components/AlternateLinks";// … diğer meta etiketlerinin yanında <head> içinde:<AlternateLinks url={url} />;

import { AlternateLinks } from "~/components/AlternateLinks";// … diğer meta etiketlerinin yanında <head> içinde:<AlternateLinks url={url} />;

GET /fr/about daha sonra şunu sunar:

html

Kodu kopyala

Kodu panoya kopyala

<link href="https://example.com/fr/about" rel="canonical" /><link href="https://example.com/about" hreflang="en" rel="alternate" /><link href="https://example.com/fr/about" hreflang="fr" rel="alternate" /><link href="https://example.com/es/about" hreflang="es" rel="alternate" /><link href="https://example.com/about" hreflang="x-default" rel="alternate" />

<link href="https://example.com/fr/about" rel="canonical" /><link href="https://example.com/about" hreflang="en" rel="alternate" /><link href="https://example.com/fr/about" hreflang="fr" rel="alternate" /><link href="https://example.com/es/about" hreflang="es" rel="alternate" /><link href="https://example.com/about" hreflang="x-default" rel="alternate" />

@solidjs/meta hakkında not: Bu kılavuz yazıldığı sırada, @solidjs/meta paketinden <Title> ve <Meta> hidrasyondan sonra istemcide uygulanır ancak SolidStart v2'de sunucu tarafında işlenen <head> içine yayınlanmaz. Üst projede bu düzeltilene kadar, arama motoru tarayıcılarının JavaScript olmadan görmesi gereken etiketleri — canonical, hreflang ve gerekirse title / description — yukarıda gösterildiği gibi doğrudan entry-server.tsx içinde işleyin.

Bulunamayan sayfaları yönetin

İsteğe bağlı

src/routes kökündeki bir splat rotası, yerel ayar segmentinin eşleşmediği her yolu yakalar — matchFilters tarafından reddedilen geçersiz yerel ayar ön ekleri dahil. Yerel ayar hala kök düzen aracılığıyla URL'den geldiği için 404 sayfası ziyaretçinin dilinde görüntülenir:

src/routes/[...404].tsx

Kodu kopyala

Kodu panoya kopyala

import { Title } from "@solidjs/meta";import { HttpStatusCode } from "@solidjs/start";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "~/components/LocalizedLink";export default function NotFound() {  const content = useIntlayer("not-found-page");  return (    <main>      <Title>{content.metaTitle.value}</Title>      <HttpStatusCode code={404} />      <h1>{content.title}</h1>      <LocalizedLink href="/">{content.backHome}</LocalizedLink>    </main>  );}

import { Title } from "@solidjs/meta";import { HttpStatusCode } from "@solidjs/start";import { useIntlayer } from "solid-intlayer";import { LocalizedLink } from "~/components/LocalizedLink";export default function NotFound() {  const content = useIntlayer("not-found-page");  return (    <main>      <Title>{content.metaTitle.value}</Title>      <HttpStatusCode code={404} />      <h1>{content.title}</h1>      <LocalizedLink href="/">{content.backHome}</LocalizedLink>    </main>  );}

Tüm tablo içeriğini göster

Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

İstek	Sonuç
`/xx`	`404` — `xx` yapılandırılmış bir yerel ayar değil
`/nonexistent`	Varsayılan yerel ayarda `404`
`/fr/nonexistent`	Fransızca `404` (`Page introuvable`)

Çok dilli bir sitemap (site haritası) oluşturun

İsteğe bağlı

Intlayer'ın sitemap oluşturucusu, her yolu yerel ayar başına bir girişe genişletir ve aralarındaki xhtml:link alternatiflerini bağlar, böylece rotanın yalnızca kurallı, yerel ayarsız yolları listelemesi gerekir.

Yalnızca düz URL'ler oluşturan temel oluşturucuların aksine Intlayer, her sayfanın her yerelleştirilmiş varyantı arasında iki yönlü bağlantılar kurar; bu da arama motorlarının yerelleştirilmiş URL'leri ilişkilendirmesine ve doğru kitleye doğru URL'yi sunmasına yardımcı olur.

SolidStart, bir HTTP yöntemini dışa aktaran bir dosyayı bir API rotasına dönüştürür ve yoldan .ts uzantısını kaldırır — böylece src/routes/sitemap.xml.ts /sitemap.xml adresinde sunulur:

src/routes/sitemap.xml.ts

Kodu kopyala

Kodu panoya kopyala

import type { APIEvent } from "@solidjs/start/server";
import { generateSitemap } from "intlayer";

const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";

export const GET = (_event: APIEvent) => {
  const sitemap = generateSitemap(
    [
      { path: "/", changefreq: "daily", priority: 1.0 },
      { path: "/about", changefreq: "monthly", priority: 0.8 },
    ],
    { siteUrl: SITE_URL }
  );

  return new Response(sitemap, {
    headers: { "Content-Type": "application/xml" },
  });
};

output of GET /sitemap.xml

Kodu kopyala

Kodu panoya kopyala

<?xml version="1.0" encoding="UTF-8"?><urlset  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"  xmlns:xhtml="http://www.w3.org/1999/xhtml">  <url>    <loc>https://example.com/about</loc>    <changefreq>monthly</changefreq>    <priority>0.8</priority>    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/about"/>    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/about"/>    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/about"/>    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/about"/>  </url></urlset>

<?xml version="1.0" encoding="UTF-8"?><urlset  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"  xmlns:xhtml="http://www.w3.org/1999/xhtml">  <url>    <loc>https://example.com/about</loc>    <changefreq>monthly</changefreq>    <priority>0.8</priority>    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/about"/>    <xhtml:link rel="alternate" hreflang="fr" href="https://example.com/fr/about"/>    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/about"/>    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/about"/>  </url></urlset>

API rotaları isteğe bağlı parametreleri desteklemez, bu nedenle bu dosyayı [[locale]] segmentinin dışında, src/routes kökünde tutun. Sitemap zaten her yerel ayarı içerir.

Aynı şekilde getMultilingualUrls ile bir robots.txt oluşturabilirsiniz, böylece Disallow girdileri hassas bir yolun her yerelleştirilmiş yazımını kapsar:

src/routes/robots.txt.ts

Kodu kopyala

Kodu panoya kopyala

import { getMultilingualUrls } from "intlayer";

const SITE_URL = process.env.SITE_URL ?? "http://localhost:3000";

const disallowedPaths = ["/admin", "/private"].flatMap((path) =>
  Object.values(getMultilingualUrls(path))
);

export const GET = () =>
  new Response(
    [
      "User-agent: *",
      "Allow: /",
      ...disallowedPaths.map((path) => `Disallow: ${path}`),
      "",
      `Sitemap: ${SITE_URL}/sitemap.xml`,
    ].join("\n"),
    { headers: { "Content-Type": "text/plain" } }
  );

Sunucu fonksiyonlarınızda yerel ayarı alın

İsteğe bağlı

Mevcut yerel ayara bir sunucu fonksiyonu veya bir API rotası içinden erişmek isteyebilirsiniz.

Bunun gibi ön ek tabanlı bir kurulumda, URL yetkilidir: getLocaleFromPath ön eki istek URL'sinden okur. getLocale, yerel ayar ön eki taşımayan istekler için bir geri çekilme (fallback) mekanizmasıdır — INTLAYER_LOCALE çerezini, ardından x-intlayer-locale üst bilgisini inceler, ardından Accept-Language uzlaşması yapar.

src/routes/[[locale]]/index.tsx

Kodu kopyala

Kodu panoya kopyala

import { createAsync } from "@solidjs/router";import { getCookie, getIntlayer, getLocale, getLocaleFromPath } from "intlayer";import { getRequestEvent } from "solid-js/web";const loadLocalizedData = async () => {  "use server";  const request = getRequestEvent()?.request;  const locale =    getLocaleFromPath(request?.url) ??    (await getLocale({      // İstekten çerezi alın (varsayılan: 'INTLAYER_LOCALE')      getCookie: (name) =>        getCookie(name, request?.headers.get("cookie") ?? ""),      // İstekten üst bilgiyi alın (varsayılan: 'x-intlayer-locale'),      // Accept-Language uzlaşmasına geri dönün      getHeader: (name) => request?.headers.get(name) ?? undefined,    }));  // getIntlayer() kullanarak bir bileşenin dışındaki bazı içerikleri alın  const content = getIntlayer("home-page", locale);  return { locale, title: String(content.title) };};export default function Page() {  const data = createAsync(() => loadLocalizedData());  return <p>{data()?.title}</p>;}

import { createAsync } from "@solidjs/router";import { getCookie, getIntlayer, getLocale, getLocaleFromPath } from "intlayer";import { getRequestEvent } from "solid-js/web";const loadLocalizedData = async () => {  "use server";  const request = getRequestEvent()?.request;  const locale =    getLocaleFromPath(request?.url) ??    (await getLocale({      // İstekten çerezi alın (varsayılan: 'INTLAYER_LOCALE')      getCookie: (name) =>        getCookie(name, request?.headers.get("cookie") ?? ""),      // İstekten üst bilgiyi alın (varsayılan: 'x-intlayer-locale'),      // Accept-Language uzlaşmasına geri dönün      getHeader: (name) => request?.headers.get(name) ?? undefined,    }));  // getIntlayer() kullanarak bir bileşenin dışındaki bazı içerikleri alın  const content = getIntlayer("home-page", locale);  return { locale, title: String(content.title) };};export default function Page() {  const data = createAsync(() => loadLocalizedData());  return <p>{data()?.title}</p>;}

Burada yalnızca getLocale fonksiyonuna güvenmeyin: yerel ayar çerezi yalnızca bir ziyaretçi etkin bir şekilde dil değiştirdiğinde yazılır, bu nedenle /fr/... adresine yapılan ilk ziyaret varsayılan yerel ayara çözümlenir.

Bileşenlerinizin içeriğini ayıklayın (extract)

İsteğe bağlı

Mevcut bir kod tabanınız varsa binlerce dosyayı dönüştürmek zaman alabilir.

Bu süreci kolaylaştırmak için Intlayer, bileşenlerinizi dönüştürmek ve içeriği ayıklamak için bir derleyici (compiler) / ayıklayıcı (extractor) sunar.

Bunu kurmak 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,

    /**
     * Çı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.
     *
     * - `true` ise derleyici, bileşen dosyasını diske yeniden yazar. Böylece dönüşüm kalıcı olur ve derleyici bir sonraki işlem için dönüşümü atlar. 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 ekler ve temel kod tabanını dokunulmadan tutar. Dönüşüm yalnızca bellekte yapılacaktır.
     */
    saveComponents: false,

    /**
     * Sözlük anahtarı ön eki
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

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

bash

Kodu kopyala

Kodu panoya kopyala

npx intlayer extract

npx intlayer extract

5. adımda açıklanan nedenden dolayı, sayfalarınızın oluşturulan içerik dosyalarını daha sonra src/routes dışına taşıyın.

v9 sürümünden itibaren intlayerCompiler, intlayer eklentisine dahil edilmiştir. Bu nedenle manuel olarak eklemenize gerek yoktur.

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

vite.config.ts

Kodu kopyala

Kodu panoya kopyala

import { solidStart } from "@solidjs/start/config";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   solidStart({ middleware: "src/middleware.ts" }),   nitro(),   intlayer(),   intlayerCompiler(), // Derleyici eklentisini ekler ],});

import { solidStart } from "@solidjs/start/config";import { nitro } from "nitro/vite";import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   solidStart({ middleware: "src/middleware.ts" }),   nitro(),   intlayer(),   intlayerCompiler(), // Derleyici eklentisini ekler ],});

bash

Kodu kopyala

Kodu panoya kopyala

npm run build # Veya npm run dev

npm run build # Veya npm run dev

TypeScript'i Yapılandırın

Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül artırma (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

{  compilerOptions: {    // ... mevcut yapılandırmalarınız  },  include: [    "src",    "*.ts",    ".intlayer/**/*.ts", // Otomatik olarak oluşturulan türleri dahil edin  ],}

{  compilerOptions: {    // ... mevcut yapılandırmalarınız  },  include: [    "src",    "*.ts",    ".intlayer/**/*.ts", // Otomatik olarak oluşturulan türleri dahil edin  ],}

Sözlük anahtarları ve içerik yolları artık derleme zamanında denetlenir:

tsx

Kodu kopyala

Kodu panoya kopyala

useIntlayer("home-page"); // ✅useIntlayer("hom-page"); // ❌ Argument of type '"hom-page"' is not assignable to parameter of type 'keyof __DictionaryRegistry'

useIntlayer("home-page"); // ✅useIntlayer("hom-page"); // ❌ Argument of type '"hom-page"' is not assignable to parameter of type 'keyof __DictionaryRegistry'

Kurulumunuzu doğrulama

Sunucuyu derleyin ve başlatın, ardından bu isteklerin beklendiği gibi davrandığını kontrol edin:

bash

Kodu kopyala

Kodu panoya kopyala

npm run buildnode .output/server/index.mjs

npm run buildnode .output/server/index.mjs

Tüm tablo içeriğini göster

Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın

İstek	Beklenen yanıt
`GET /`	`200` — İngilizce
`GET /` (`Accept-Language: fr` ile)	`302` → `/fr`
`GET /` (`INTLAYER_LOCALE=es` çerezi ile)	`302` → `/es`
`GET /fr`	`200` — Fransızca, `<html lang="fr">`
`GET /fr/about`	`200` — Fransızca hakkında sayfası
`GET /en/about`	`302` → `/about` (kurallı yönlendirme)
`GET /xx`	`404`
`GET /fr/nonexistent`	`404` Fransızca
`GET /sitemap.xml`	`200` — çok dilli XML site haritası

Bir sayfayı işleyen satırlar vite dev altında aynı şekilde davranır. Üç yönlendirme satırı, işleyiciyi kendiniz bir ara yazılım (middleware) olarak kaydetmediğiniz sürece yalnızca oluşturulmuş bir sunucu için geçerlidir — 3. adıma bakın.

Geliştirme sunucusunu Bun (bun --bun vite dev) yerine Node (vite dev) üzerinde çalıştırın: SolidStart'ın SSR'ı şu anda Bun çalışma zamanında Expected a Response object, but received 'NodeResponse' hatasıyla başarısız oluyor. Bu Intlayer ile ilgili değildir — düz şablonda da tekrarlanır — ve yalnızca geliştirme sunucusunu etkiler, vite build komutunu etkilemez.

Git Yapılandırması

Intlayer tarafından oluşturulan dosyaların yoksayılması önerilir. Bu, bunları Git depolamanıza (repository) taahhüt (commit) etmekten kaçınmanızı sağlar.

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

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

VS Code Eklentisi

Intlayer ile geliştirme deneyiminizi geliş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 algılama.
Çevrilmiş içeriğin satır içi önizlemeleri.
Çevirileri kolayca oluşturmak ve güncellemek için hızlı eylemler.

Daha Fazlası

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

Dokümantasyon Referansları

Vite ve Solid

Vite ve Svelte

Sürüm Geçmişi

Intlayer Kullanarak SolidStart Web Sitenizi Çevirin | Uluslararasılaştırma (i18n)

İçindekiler

Neden alternatifler yerine Intlayer?

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

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

Projenizin Yapılandırılması

Vite Yapılandırmanıza Intlayer'ı Entegre Edin

Yerel ayar yönlendirmesi eklentiyle birlikte gelir

İçeriğinizi Bildirin

Yerelleştirilmiş yönlendirme ekleyin

Yerel ayarı uygulamanıza sağlayın

Sunucuda HTML lang ve dir özniteliklerini ayarlayın

Sayfalarınızda Intlayer Kullanın

Yerelleştirilmiş Bir Bağlantı (Link) Bileşeni Oluşturun

Bir Yerel Ayar Değiştirici (Locale Switcher) Bileşeni Oluşturun

Kurallı (canonical) ve hreflang bağlantılarını yayınlayın

Bulunamayan sayfaları yönetin

Çok dilli bir sitemap (site haritası) oluşturun

Sunucu fonksiyonlarınızda yerel ayarı alın

Bileşenlerinizin içeriğini ayıklayın (extract)

TypeScript'i Yapılandırın

Kurulumunuzu doğrulama

Git Yapılandırması

VS Code Eklentisi

Daha Fazlası

Dokümantasyon Referansları