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
- "Solid useIntlayer API kullanımını doğrudan özellik erişimine güncelle"v8.9.004.05.2026
- "init komutu ekle"v7.5.930.12.2025
- "Layout'u güncelle ve 404'ü yönet"v7.5.627.12.2025
- "Doküman güncellendi"v6.1.503.10.2025
- "React Router v7 için eklendi"v5.8.204.09.2025
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üleyinBu 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ıBelge Markdown'ını panoya kopyala
Intlayer ile React Router v7 çevirin | Uluslararasılaştırma (i18n)
Bu rehber, React Router v7 projelerinde yerel dil farkındalıklı yönlendirme, TypeScript desteği ve modern geliştirme uygulamaları ile sorunsuz uluslararasılaştırma için Intlayer'ın nasıl entegre edileceğini gösterir.
Table of Contents
Intlayer Nedir?
Intlayer, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir.
Intlayer ile şunları yapabilirsiniz:
- Bileşen seviyesinde bildirimsel sözlükler kullanarak çevirileri kolayca yönetmek.
- Meta verileri, yönlendirmeleri ve içeriği dinamik olarak yerelleştirmek.
- Otomatik oluşturulan tiplerle TypeScript desteğini sağlamak, otomatik tamamlama ve hata tespitini geliştirmek.
- Dinamik yerel dil algılama ve değiştirme gibi gelişmiş özelliklerden faydalanmak.
- React Router v7'nin yapılandırma tabanlı yönlendirme sistemi ile yerel dil farkındalıklı yönlendirmeyi etkinleştirin.
React Router v7 Uygulamasında Intlayer Kurulumu İçin Adım Adım Rehber
Adım 1: Bağımlılıkları Yükleyin
Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri yükleyin:
Kodu panoya kopyala
npm install intlayer react-intlayernpm install vite-intlayer --save-devnpx intlayer initintlayer
Uluslararasılaştırma araçlarını yapılandırma yönetimi, çeviri, içerik beyanı, transpile etme ve CLI komutları için sağlayan temel paket.
react-intlayer Intlayer'ı React uygulamasıyla entegre eden paket. React uluslararasılaştırması için bağlam sağlayıcıları ve kancalar sunar.
vite-intlayer Intlayer'ı Vite paketleyici ile entegre etmek için Vite eklentisini, ayrıca kullanıcının tercih ettiği yerel dili algılamak, çerezleri yönetmek ve URL yönlendirmesini işlemek için ara yazılımı içerir.
Adım 2: Projenizin Yapılandırması
Dosya sistemi tabanlı rotalar ile React Router v7 uygulamasında Intlayer kurulumu için adım adım rehber
See Application Template on GitHub.
Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:
Kodu panoya kopyala
import { type IntlayerConfig, 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 isimlerini, içerik bildirimlerinizin konumunu ve uzantısını ayarlayabilir, Intlayer günlüklerini konsolda devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Mevcut parametrelerin tam listesi için yapılandırma dokümantasyonuna bakınız.
Adım 3: Intlayer'ı Vite Yapılandırmanıza Entegre Edin
Yapılandırmanıza intlayer eklentisini ekleyin:
Kodu panoya kopyala
import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({ plugins: [reactRouter(), 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ı optimize etmek için takma adlar sağlar.Adım 4: React Router v7 Rotalarını Yapılandırma
Yerel dil farkındalığı olan rotalarla yönlendirme yapılandırmanızı ayarlayın:
Kodu panoya kopyala
import { layout, route, type RouteConfig } from "@react-router/dev/routes";export default [ route("/:lang?", "routes/page.tsx"), // Yerelleştirilmiş ana sayfa route("/:lang?/about", "routes/about/page.tsx"), // Yerelleştirilmiş hakkında sayfası] satisfies RouteConfig;Adım 5: Layout Bileşenleri Oluşturun
Kök layout ve dil bazlı layout'larınızı ayarlayın:
Kök Layout
Kodu panoya kopyala
import { getLocaleFromPath } from "intlayer";import { IntlayerProvider } from "react-intlayer";import { data, Meta, Scripts, ScrollRestoration, useLoaderData,} from "react-router";import type { Route } from "./+types/root";// ... Unchanged App, links and ErrorBoundary codeexport async function loader({ request }: Route.LoaderArgs) { const locale = getLocaleFromPath(request.url); if (!locale) { throw data("Language not supported", { status: 404 }); } return { locale };}export function Layout({ children,}: { children: React.ReactNode } & Route.ComponentProps) { const data = useLoaderData<typeof loader>(); const { locale } = data ?? {}; return ( <html lang={locale}> <head> <meta charSet="utf-8" /> <meta content="width=device-width, initial-scale=1" name="viewport" /> <Meta /> <Links /> </head> <body> <IntlayerProvider locale={locale}>{children}</IntlayerProvider> <ScrollRestoration /> <Scripts /> </body> </html> );}Adım 6: İçeriğinizi Bildirin
Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:
Kodu panoya kopyala
import { t, type Dictionary } from "intlayer";const pageContent = { key: "page", content: { title: t({ en: "Welcome to React Router v7 + Intlayer", es: "Bienvenido a React Router v7 + Intlayer", fr: "Bienvenue sur React Router v7 + Intlayer", }), description: t({ en: "Build multilingual applications with ease using React Router v7 and Intlayer.", es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.", fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.", }), aboutLink: t({ en: "Hakkımızda Öğrenin", es: "Aprender Sobre Nosotros", fr: "En savoir plus sur nous", }), homeLink: t({ en: "Ana Sayfa", es: "Inicio", fr: "Accueil", }), },} satisfies Dictionary;export default pageContent;İçerik bildirimleriniz, uygulamanızdacontentDirdizinine (varsayılan olarak./app) dahil edildiği sürece herhangi bir yerde tanımlanabilir. Ve içerik bildirim dosya uzantısıyla eşleşmelidir (varsayılan olarak.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Daha fazla detay için içerik bildirim dokümantasyonuna bakınız.
Adım 7: Yerel Duyarlı Bileşenler Oluşturun
Yerel duyarlı gezinme için bir LocalizedLink bileşeni oluşturun:
Kodu panoya kopyala
import type { FC } from "react";import { getLocalizedUrl, type LocalesValues } from "intlayer";import { useLocale } from "react-intlayer";import { Link, type LinkProps, type To } from "react-router";const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);// Belirtilen locale göre URL'yi yerelleştirirexport const locacalizeTo = (to: To, locale: LocalesValues): To => { if (typeof to === "string") { if (isExternalLink(to)) { return to; } return getLocalizedUrl(to, locale); } if (isExternalLink(to.pathname ?? "")) { return to; } return { ...to, pathname: getLocalizedUrl(to.pathname ?? "", locale), };};// Yerelleştirilmiş link bileşeniexport const LocalizedLink: FC<LinkProps> = (props) => { const { locale } = useLocale(); return <Link {...props} to={locacalizeTo(props.to, locale)} />;};Yerelleştirilmiş rotalara gitmek istediğiniz durumlarda, useLocalizedNavigate kancasını kullanabilirsiniz:
Kodu panoya kopyala
import { useLocale } from "react-intlayer";import { type NavigateOptions, type To, useNavigate } from "react-router";import { locacalizeTo } from "~/components/localized-link";export const useLocalizedNavigate = () => { const navigate = useNavigate(); const { locale } = useLocale(); const localizedNavigate = (to: To, options?: NavigateOptions) => { const localedTo = locacalizeTo(to, locale); navigate(localedTo, options); }; return localizedNavigate;};Adım 8: Sayfalarınızda Intlayer'ı Kullanın
Uygulamanız boyunca içerik sözlüklerinize erişin:
Yerelleştirilmiş Ana Sayfa
Kodu panoya kopyala
import { getIntlayer, validatePrefix } from "intlayer";import { useIntlayer } from "react-intlayer";import { data } from "react-router";import { LocaleSwitcher } from "~/components/locale-switcher";import { Navbar } from "~/components/navbar";import type { Route } from "./+types/page";export const loader = ({ params }: Route.LoaderArgs) => { const { locale } = params; const { isValid } = validatePrefix(locale); if (!isValid) { throw data("Locale not supported", { status: 404 }); }};export const meta: Route.MetaFunction = ({ params }) => { const content = getIntlayer("page", params.locale); return [ { title: content.title }, { content: content.description, name: "description" }, ];};export default function Page() { const { title, description, aboutLink } = useIntlayer("page"); return ( <div> <h1>{title}</h1> <p>{description}</p> <nav> <LocalizedLink to="/about">{aboutLink}</LocalizedLink> </nav> </div> );}useIntlayer kancası hakkında daha fazla bilgi edinmek için belgelere bakabilirsiniz.Eğer uygulamanız zaten mevcutsa, binlerce bileşeni bir saniye içinde dönüştürmek için Intlayer Compiler'ı extract komutu ile birlikte kullanabilirsiniz.
Adım 9: Bir Dil Değiştirici Bileşeni Oluşturun
Kullanıcıların dilleri değiştirmesine izin veren bir bileşen oluşturun:
Kodu panoya kopyala
import type { FC } from "react";import { getHTMLTextDir, getLocaleName, getLocalizedUrl, getPathWithoutLocale, Locales,} from "intlayer";import { setLocaleInStorage, useIntlayer, useLocale } from "react-intlayer";import { Link, useLocation } from "react-router";export const LocaleSwitcher: FC = () => { const { localeSwitcherLabel } = useIntlayer("locale-switcher"); const { pathname } = useLocation(); const { availableLocales, locale } = useLocale(); const pathWithoutLocale = getPathWithoutLocale(pathname); return ( <ol> {availableLocales.map((localeItem) => ( <li key={localeItem}> <Link aria-current={localeItem === locale ? "sayfa" : undefined} aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`} onClick={() => setLocale(localeItem)} to={getLocalizedUrl(pathWithoutLocale, localeItem)} > <span> {/* Yerel - örn. FR */} {localeItem} </span> <span> {/* Dil kendi yerelinde - örn. Français */} {getLocaleName(localeItem, locale)} </span> <span dir={getHTMLTextDir(localeItem)} lang={localeItem}> {/* Mevcut yerelde dil - örn. Locales.SPANISH olarak ayarlanmış mevcut yerelle Francés */} {getLocaleName(localeItem)} </span> <span dir="ltr" lang={Locales.ENGLISH}> {/* İngilizce dilinde - örn. French */} {getLocaleName(localeItem, Locales.ENGLISH)} </span> </Link> </li> ))} </ol> );};useLocale hook'u hakkında daha fazla bilgi edinmek için belgelere bakınız.Adım 10: HTML Öznitelikleri Yönetimi Ekleme (İsteğe Bağlı)
HTML lang ve dir özniteliklerini yönetmek için bir hook oluşturun:
Kodu panoya kopyala
import { 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:
Kodu panoya kopyala
import { Outlet } from "react-router";import { IntlayerProvider } from "react-intlayer";import { useI18nHTMLAttributes } from "app/hooks/useI18nHTMLAttributes"; // hook'u içe aktarexport default function RootLayout() { useI18nHTMLAttributes(); // hook'u çağır return ( <IntlayerProvider> <Outlet /> </IntlayerProvider> );}(İsteğe bağlı) Adım 12 : Bileşenlerinizin içeriğini çıkarı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 çıkarmak için bir derleyici / çıkarıcı sunar.
Kurulum için intlayer.config.ts dosyanıza bir compiler bölümü ekleyebilirsiniz:
Kodu panoya kopyala
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... Yapılandırmanızın geri kalanı
compiler: {
/**
* Derleyicinin etkinleştirilip etkinleştirilmeyeceğini belirtir.
*/
enabled: true,
/**
* Çıktı dosyalarının yolunu tanımlar
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* Bileşenlerin dönüştürüldükten sonra kaydedilip kaydedilmeyeceğini belirtir. Bu sayede derleyici, uygulamayı dönüştürmek için yalnızca bir kez çalıştırılabilir ve ardından kaldırılabilir.
*/
saveComponents: false,
/**
* Sözlük anahtarı öneki
*/
dictionaryKeyPrefix: "",
},
};
export default config;Bileşenlerinizi dönüştürmek ve içeriği çıkarmak için çıkarıcıyı çalıştırın
Kodu panoya kopyala
npx intlayer extractConfigure TypeScript
Intlayer uses module augmentation to get benefits of TypeScript and make your codebase stronger.
Ensure your TypeScript configuration includes the autogenerated types:
Kodu panoya kopyala
{ // ... your existing configurations include: [ // ... your existing includes ".intlayer/**/*.ts", // Include the auto-generated types ],}Git Configuration
It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.
To do this, you can add the following instructions to your .gitignore file:
Kodu panoya kopyala
# Ignore the files generated by Intlayer.intlayerVS Code Extension
To improve your development experience with Intlayer, you can install the official Intlayer VS Code Extension.
Install from the VS Code Marketplace
This extension provides:
- Autocompletion for translation keys.
- Real-time error detection for missing translations.
- Inline previews of translated content.
- Quick actions to easily create and update translations.
For more details on how to use the extension, refer to the Intlayer VS Code Extension documentation.
Go Further
To go further, you can implement the visual editor or externalize your content using the CMS.
Documentation References
- Intlayer Documentation
- React Router v7 Documentation
- useIntlayer hook
- useLocale hook
- Content Declaration
- Configuration
This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 for a fully internationalized application with locale-aware routing and TypeScript support.
Adım 11: Middleware ekleyin (İsteğe bağlı)
Ayrıca uygulamanıza sunucu tarafı yönlendirme eklemek için intlayerProxy kullanabilirsiniz. Bu eklenti, URL'ye göre geçerli yerel ayarı otomatik olarak algılar ve uygun yerel ayar çerezini ayarlar. Hiçbir yerel ayar belirtilmemişse, eklenti kullanıcının tarayıcı dil tercihlerine göre en uygun yerel ayarı belirler. Hiçbir yerel ayar algılanmazsa, varsayılan yerel ayara yönlendirme yapar.
ÜretimdeintlayerProxykullanmak için,vite-intlayerpaketinidevDependencies'dendependencies'e geçirmeniz gerektiğini unutmayın.
Kodu panoya kopyala
import { reactRouter } from "@react-router/dev/vite";import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";export default defineConfig({ plugins: [ intlayerProxy(), // should be placed first reactRouter(), intlayer(), ],});TypeScript'i Yapılandırma
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 oluşturulan türleri içerdiğinden emin olun:
Kodu panoya kopyala
{ // ... mevcut yapılandırmalarınız include: [ // ... mevcut dahil ettikleriniz ".intlayer/**/*.ts", // Otomatik oluşturulan türleri dahil et ],}Git Yapılandırması
Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir. Bu, bu dosyaların Git deposuna eklenmesini önlemenizi sağlar.
Bunu yapmak için .gitignore dosyanıza aşağıdaki talimatları ekleyebilirsiniz:
Kodu panoya kopyala
# Intlayer tarafından oluşturulan dosyaları göz ardı et.intlayerVS Code Eklentisi
Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi Intlayer VS Code Eklentisini yükleyebilirsiniz.
VS Code Marketplace'ten Yükleyin
Bu eklenti şunları sağlar:
- Çeviri anahtarları için Otomatik Tamamlama.
- Eksik çeviriler için Gerçek Zamanlı Hata Tespiti.
- Çevrilmiş içeriğin Satır İçi Önizlemeleri.
- Çevirileri kolayca oluşturup güncellemek için Hızlı İşlemler.
Eklentinin nasıl kullanılacağı hakkında daha fazla bilgi için Intlayer VS Code Eklentisi dokümantasyonuna bakabilirsiniz.
Daha İleri Gitmek İçin
Daha ileri gitmek için, görsel editörü uygulayabilir veya içeriğinizi CMS kullanarak dışa aktarabilirsiniz.
Dokümantasyon Referansları
- Intlayer Dokümantasyonu
- React Router v7 Dokümantasyonu
- useIntlayer hook
- useLocale hook
- İçerik Beyanı
- Yapılandırma
Bu kapsamlı rehber, Intlayer'ı React Router v7 ile tam uluslararasılaştırılmış, yerel farkındalıklı yönlendirme ve TypeScript desteği olan bir uygulama için entegre etmeniz gereken her şeyi sağlar.