Intlayer ve React Router v7 ile uluslararasılaştırma (i18n) başlangıç kılavuzu

Bu kılavuz, React Router v7 projelerinde yerel ayar bilincine sahip yönlendirme, TypeScript desteği ve modern geliştirme uygulamaları ile Intlayer'ı sorunsuz bir şekilde entegre etmeyi 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önetin.
• Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.
• Otomatik tamamlama ve hata algılama ile TypeScript desteği sağlayın.
• Dinamik yerel algılama ve anahtarlama gibi gelişmiş özelliklerden yararlanın.
• React Router v7'nin yapılandırma tabanlı yönlendirme sistemi ile yerel ayar bilincine sahip yönlendirmeyi etkinleştirin.

React Router v7 Uygulamasında Intlayer Kurulumu Adım Adım Kılavuzu

Adım 1: Bağımlılıkları Kurma

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

npm install intlayer react-intlayernpm install vite-intlayer --save-dev

• intlayer

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

• react-intlayer Intlayer'ı React uygulaması ile entegre eden paket. React uluslararasılaştırması için bağlam sağlayıcıları ve kancalar sağlar.

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

Adım 2: Projenizi Yapılandırma

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

import { type IntlayerConfig, Locales } from "intlayer";const config: IntlayerConfig = {  internationalization: {    defaultLocale: Locales.ENGLISH,    locales: [Locales.ENGLISH, Locales.TURKISH],  },  middleware: {    prefixDefault: true, // URL'lerde her zaman varsayılan yerel ayarı önekle  },};export default config;

Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'ler, middleware yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı, konsolda Intlayer günlüklerinin devre dışı bırakılması ve daha fazlasını ayarlayabilirsiniz. Kullanılabilir parametrelerin tam listesi için yapılandırma dokümantasyonuna bakın.

Adım 3: React Router v7 Rotalarını Yapılandırma

Yerel ayar bilincine sahip rotalarla yönlendirme yapılandırmanızı ayarlayın:

import { layout, route, type RouteConfig } from "@react-router/dev/routes";export default [  layout("routes/layout.tsx", [    route("/", "routes/page.tsx"), // Kök sayfa - yerel ayara yönlendirir    route("/:lang", "routes/[lang]/page.tsx"), // Yerelleştirilmiş ana sayfa    route("/:lang/about", "routes/[lang]/about/page.tsx"), // Yerelleştirilmiş hakkımızda sayfası  ]),] satisfies RouteConfig;

Adım 4: Vite Yapılandırmanızda Intlayer'ı Entegre Etme

Intlayer eklentisini yapılandırmanıza ekleyin:

import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayerMiddlewarePlugin, intlayerPlugin } from "vite-intlayer";import tsconfigPaths from "vite-tsconfig-paths";export default defineConfig({  plugins: [    reactRouter(),    tsconfigPaths(),    intlayerPlugin(),    intlayerMiddlewarePlugin(),  ],});

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

Adım 5: Düzen Bileşenleri Oluşturma

Kök düzeninizi ve yerel ayar özel düzenlerinizi ayarlayın:

Kök Düzen

// app/routes/layout.tsximport { Outlet } from "react-router";import { IntlayerProvider } from "react-intlayer";export default function RootLayout() {  return (    <IntlayerProvider>      <Outlet />    </IntlayerProvider>  );}

Adım 6: İçeriğinizi Bildirin

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

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    title: t({      en: "Welcome to React Router v7 + Intlayer",      tr: "React Router v7 + Intlayer'a Hoş Geldiniz",    }),    description: t({      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",      tr: "React Router v7 ve Intlayer kullanarak kolayca çok dilli uygulamalar geliştirin.",    }),    aboutLink: t({      en: "Learn About Us",      tr: "Hakkımızda Öğrenin",    }),    homeLink: t({      en: "Home",      tr: "Ana Sayfa",    }),  },} satisfies Dictionary;export default pageContent;

İçerik bildirimleriniz, contentDir dizinine dahil edildiği sürece uygulamanızın herhangi bir yerinde tanımlanabilir (varsayılan olarak, ./app). Ve içerik bildirim dosyası 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 bakın.

Adım 7: Yerel Ayar Bilincine Sahip Bileşenler Oluşturma

Yerel ayar bilincine sahip navigasyon için bir LocalizedLink bileşeni oluşturun:

// app/components/localized-link.tsximport { getLocalizedUrl } from "intlayer";import { useLocale } from "react-intlayer";import React from "react";import { Link, useLocation } from "react-router";type RouterLinkProps = React.ComponentProps<typeof Link>;export default function LocalizedLink({ to, ...props }: RouterLinkProps) {  const { locale } = useLocale();  const location = useLocation();  const isExternal = (path: string) =>    /^([a-z][a-z0-9+.-]*:)?\/\//i.test(path) || path.startsWith("mailto:");  if (typeof to === "string") {    if (to.startsWith("/") && !isExternal(to)) {      return <Link to={getLocalizedUrl(to, locale)} {...props} />;    }    return <Link to={to} {...props} />;  }  if (to && typeof to === "object") {    const pathname = (to as { pathname?: string }).pathname;    if (pathname && pathname.startsWith("/") && !isExternal(pathname)) {      return (        <Link          to={{ ...to, pathname: getLocalizedUrl(pathname, locale) }}          {...props}        />      );    }    return <Link to={to} {...props} />;  }  return (    <Link      to={getLocalizedUrl(location.pathname + location.search, locale)}      {...props}    />  );}

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

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

Kök Yönlendirme Sayfası

// app/routes/page.tsximport { useLocale } from "react-intlayer";import { Navigate } from "react-router";export default function Page() {  const { locale } = useLocale();  return <Navigate replace to={locale} />;}

Yerelleştirilmiş Ana Sayfa

import { useIntlayer } from "react-intlayer";import LocalizedLink from "~/components/localized-link";export default function Page() {  const content = useIntlayer("page");  return (    <div style={{ padding: "2rem", textAlign: "center" }}>      <h1>{content.title}</h1>      <p>{content.description}</p>      <nav style={{ marginTop: "2rem" }}>        <LocalizedLink          to="/about"          style={{            display: "inline-block",            padding: "0.5rem 1rem",            backgroundColor: "#007bff",            color: "white",            textDecoration: "none",            borderRadius: "4px",          }}        >          {content.aboutLink}        </LocalizedLink>      </nav>    </div>  );}

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

Adım 9: Yerel Ayar Anahtarlama Bileşeni Oluşturma

Kullanıcıların dilleri değiştirmesine izin veren bir bileşen oluşturun:

import { getLocalizedUrl, getLocaleName } from "intlayer";import { useLocale } from "react-intlayer";import { useLocation, useNavigate } from "react-router";export default function LocaleSwitcher() {  const { locale, availableLocales, setLocale } = useLocale();  const location = useLocation();  const navigate = useNavigate();  const handleLocaleChange = (newLocale: string) => {    const localizedUrl = getLocalizedUrl(      location.pathname + location.search,      newLocale    );    setLocale(newLocale);    navigate(localizedUrl);  };  return (    <div style={{ margin: "1rem 0" }}>      <label htmlFor="locale-select">Dil Seçin: </label>      <select        id="locale-select"        value={locale}        onChange={(e) => handleLocaleChange(e.target.value)}        style={{ padding: "0.25rem", marginLeft: "0.5rem" }}      >        {availableLocales.map((availableLocale) => (          <option key={availableLocale} value={availableLocale}>            {getLocaleName(availableLocale)}          </option>        ))}      </select>    </div>  );}

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

Adım 10: HTML Özellikleri Yönetimini Ekleyin (İsteğe Bağlı)

HTML lang ve dir özelliklerini yönetmek için bir kanca oluşturun:

// app/hooks/useI18nHTMLAttributes.tsximport { getHTMLTextDir } from "intlayer";import { useEffect } from "react";import { useLocale } from "react-intlayer";export const useI18nHTMLAttributes = () => {  const { locale } = useLocale();  useEffect(() => {    document.documentElement.lang = locale;    document.documentElement.dir = getHTMLTextDir(locale);  }, [locale]);};

Ardından kök bileşeninizde kullanın:

// app/routes/layout.tsximport { Outlet } from "react-router";import { IntlayerProvider } from "react-intlayer";import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // kancayı içe aktarınexport default function RootLayout() {  useI18nHTMLAttributes(); // kancayı çağırın  return (    <IntlayerProvider>      <Outlet />    </IntlayerProvider>  );}

Adım 11: Uygulamanızı Oluşturun ve Çalıştırın

İçerik sözlüklerini oluşturun ve uygulamanızı çalıştırın:

# Intlayer sözlüklerini oluşturunnpm run intlayer:build# Geliştirme sunucusunu başlatınnpm run dev

Adım 12: TypeScript Yapılandırma (İsteğe Bağlı)

Intlayer, TypeScript'ten faydalanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletmesi kullanır.

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

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

Git Yapılandırma

Intlayer tarafından oluşturulan dosyaları yok saymanız önerilir. Bu, onları Git deponuza göndermekten kaçınmanıza olanak tanır.

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

# Intlayer tarafından oluşturulan dosyaları yok say.intlayer

Üretim Dağıtımı

Uygulamanızı dağıtırken:

1. Uygulamanızı oluşturun:

   bash

   Kodu kopyala

   Kodu panoya kopyala

   npm run build

2. Intlayer sözlüklerini oluşturun:

   bash

   Kodu kopyala

   Kodu panoya kopyala

   npm run intlayer:build

3. Üretimde middleware kullanıyorsanız vite-intlayer'ı bağımlılıklara taşıyın:

   bash

   Kodu kopyala

   Kodu panoya kopyala

   npm install vite-intlayer --save

Uygulamanız artık şunları destekleyecek:

• URL Yapısı: /en, /en/about, /tr, /tr/about
• Tarayıcı tercihlerine göre otomatik yerel ayar algılama
• React Router v7 ile yerel ayar bilincine sahip yönlendirme
• Otomatik olarak oluşturulan türlerle TypeScript desteği
• Uygun yerel ayar yönetimi ile sunucu tarafı işleme

VS Code Uzantısı

Intlayer ile geliştirme deneyiminizi geliştirmek için, resmi Intlayer VS Code Uzantısı'nı kurabilirsiniz.

VS Code Marketplace'ten Kurun

Bu uzantı ş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.

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

Daha Fazla İlerleyin

Daha fazla ilerlemek için, görsel düzenleyiciyi uygulayabilir veya içeriğinizi CMS kullanarak harici hale getirebilirsiniz.

Dokümantasyon Referansları

• Intlayer Dokümantasyonu
• React Router v7 Dokümantasyonu
• useIntlayer kancası
• useLocale kancası
• İçerik Bildirimi
• Yapılandırma

Bu kapsamlı kılavuz, React Router v7 ile Intlayer'ı yerel ayar bilincine sahip yönlendirme ve TypeScript desteği ile tamamen uluslararasılaştırılmış bir uygulama için entegre etmek için ihtiyacınız olan her şeyi sağlar.

Dokümantasyon Geçmişi