SvelteKit i18n: अंतरराष्ट्रीयकरण सेटअप गाइड
शुरुआत से बहुभाषी ऐप तक: ICU मैसेज फ़ॉर्मेट, लोकेल-आधारित रूटिंग और स्मार्ट फ़ॉलबैक चेन के साथ अपने SvelteKit ऐप में svelte-i18n सेट अप करें।
svelte-i18n इंस्टॉल करें
svelte-i18n, Svelte और SvelteKit के लिए मानक अंतरराष्ट्रीयकरण लाइब्रेरी है। इसमें रिएक्टिव स्टोर, ICU MessageFormat का सपोर्ट और पहले से उपलब्ध लेज़ी लोकेल लोडिंग मिलती है।
npm install svelte-i18nsvelte-i18n कॉन्फ़िगर करें
एक i18n कॉन्फ़िगरेशन फ़ाइल बनाएँ, जो लेज़ी-लोडेड इंपोर्ट फ़ंक्शन के साथ आपके लोकेल रजिस्टर करे। svelte-i18n किसी लोकेल के मैसेज केवल तभी फ़ेच करेगा, जब वह लोकेल सक्रिय किया जाएगा।
// src/lib/i18n.ts
import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
// Register locale loaders (lazy-loaded)
register('en', () => import('../locales/en.json'));
register('de', () => import('../locales/de.json'));
register('ja', () => import('../locales/ja.json'));
register('es', () => import('../locales/es.json'));
init({
fallbackLocale: 'en',
initialLocale: getLocaleFromNavigator(), // Auto-detect browser language
});SvelteKit लेआउट इंटीग्रेशन
अपने i18n कॉन्फ़िग को रूट लेआउट में इंपोर्ट करें और $isLoading स्टोर से रेंडरिंग को नियंत्रित करें। इससे लोकेल डेटा के एसिंक्रोनस रूप से लोड होते समय अनूदित न हुई कुंजियाँ क्षणभर दिखाई नहीं देतीं।
<!-- src/routes/+layout.svelte -->
<script>
// Import i18n config — must run before any component renders
import '../lib/i18n';
import { isLoading } from 'svelte-i18n';
</script>
{#if $isLoading}
<p>Loading translations...</p>
{:else}
<slot />
{/if}SvelteKit में लोकेल-आधारित रूटिंग
/en/about और /de/about जैसे SEO-अनुकूल URL के लिए [lang] रूट पैरामीटर का उपयोग करें। URL पैरामीटर के आधार पर लेआउट के load फ़ंक्शन में svelte-i18n लोकेल सेट करें।
// src/routes/[lang]/+layout.ts
import { locale } from 'svelte-i18n';
export function load({ params }) {
// Set the active locale from the URL parameter
locale.set(params.lang);
return {};
}
// src/routes/[lang]/+layout.svelte
<script>
import '../../lib/i18n';
import { isLoading } from 'svelte-i18n';
</script>
{#if $isLoading}
<p>Loading...</p>
{:else}
<slot />
{/if}अनुवाद फ़ाइल का फ़ॉर्मेट
हर लोकेल के लिए एक JSON फ़ाइल बनाएँ। svelte-i18n बहुवचन, वेरिएबल और select एक्सप्रेशन के लिए नेस्टेड कुंजियों और ICU MessageFormat सिंटैक्स को सपोर्ट करता है।
// src/locales/en.json
{
"nav": {
"home": "Home",
"about": "About",
"settings": "Settings"
},
"greeting": "Hello, {name}!",
"cart": {
"itemCount": "{count, plural, one {# item} other {# items}}"
}
}
// src/locales/de.json
{
"nav": {
"home": "Startseite",
"about": "Uber uns",
"settings": "Einstellungen"
},
"greeting": "Hallo, {name}!",
"cart": {
"itemCount": "{count, plural, one {# Artikel} other {# Artikel}}"
}
}कंपोनेंट में अनुवादों का उपयोग करें
svelte-i18n से $_ स्टोर (या $format) इंपोर्ट करें और अपने Svelte टेम्प्लेट में उसका उपयोग करें। यह स्टोर रिएक्टिव है—लोकेल बदलते ही सभी अनूदित स्ट्रिंग अपने-आप अपडेट हो जाती हैं।
<script>
import { _ } from 'svelte-i18n';
</script>
<h1>{$_('greeting', { values: { name: 'World' } })}</h1>
<nav>
<a href="/">{$_('nav.home')}</a>
<a href="/about">{$_('nav.about')}</a>
</nav><script>
import { _, date, number, time } from 'svelte-i18n';
</script>
<!-- Simple string -->
<p>{$_('greeting', { values: { name: userName } })}</p>
<!-- ICU plurals — handled automatically -->
<p>{$_('cart.itemCount', { values: { count: 3 } })}</p>
<!-- Date formatting -->
<p>{$date(new Date(), { format: 'long' })}</p>
<!-- Number formatting -->
<p>{$number(1999.99, { style: 'currency', currency: 'USD' })}</p>भाषा बदलना
ऐसा भाषा चयनकर्ता बनाएँ जो $locale स्टोर से बाइंड हो। वैल्यू बदलने पर svelte-i18n नए लोकेल के मैसेज लोड करता है और सभी अनूदित स्ट्रिंग को रिएक्टिव रूप से अपडेट करता है।
<script>
import { locale, locales } from 'svelte-i18n';
const LANGUAGE_NAMES = {
en: 'English',
de: 'Deutsch',
ja: '日本語',
es: 'Espanol',
};
</script>
<select bind:value={$locale}>
{#each $locales as loc}
<option value={loc}>{LANGUAGE_NAMES[loc] ?? loc}</option>
{/each}
</select>ICU MessageFormat से बहुवचन संभालें
svelte-i18n बहुवचन के लिए ICU MessageFormat का उपयोग करता है—यह एक अंतरराष्ट्रीय मानक है, जो सभी CLDR बहुवचन श्रेणियों को संभालता है। अरबी में 6 रूप, रूसी में 4 और जापानी में 1 रूप होता है। अपनी लक्षित भाषाओं के लिए आवश्यक रूप परिभाषित करें और svelte-i18n अपने-आप सही रूप चुन लेगा।
// svelte-i18n uses ICU MessageFormat for plurals
// English:
{
"items": "{count, plural, one {# item} other {# items}}"
}
// Arabic (6 forms):
{
"items": "{count, plural, zero {no items} one {item} two {two items} few {# items} many {# items} other {# items}}"
}
// Japanese (1 form):
{
"items": "{count, plural, other {#個のアイテム}}"
}svelte-i18n-locale-chain के साथ स्मार्ट लोकेल फ़ॉलबैक
कोई कुंजी मौजूद न होने पर svelte-i18n सीधे fallbackLocale पर चला जाता है—बीच में कोई फ़ॉलबैक नहीं होता। इसलिए pt-BR यूज़र को बिल्कुल उपयुक्त pt-PT अनुवादों के बजाय अंग्रेज़ी दिखाई देती है। svelte-i18n-locale-chain क्षेत्रीय वैरिएंट के मैसेज को डीप-मर्ज करने वाली स्मार्ट फ़ॉलबैक चेन से इस समस्या को ठीक करता है।
npm install svelte-i18n-locale-chain svelte-i18n// src/lib/i18n.ts
import { initLocaleChain, setLocale } from 'svelte-i18n-locale-chain';
// Replace svelte-i18n's init + register with initLocaleChain
await initLocaleChain({
loadMessages: (locale) =>
import(`../locales/${locale}.json`).then(m => m.default),
defaultLocale: 'en',
initialLocale: 'pt-BR',
});
// Later, to change locale:
await setLocale('fr-CA');
// fr-CA user sees: fr-CA messages -> fr messages -> en messages
// No missing keys — deep-merged automaticallyअनुवादों को ऑटोमेट करें
अपना i18n सेटअप पूरा करने के बाद AI का उपयोग करके अपनी लोकेल फ़ाइलों का अनुवाद करें। अपने IDE में AI सहायक से अपनी सोर्स फ़ाइल का अनुवाद करने के लिए कहें या अपनी CI/CD पाइपलाइन में i18n Agent CLI का उपयोग करें।
# In your IDE, ask your AI assistant:
> Translate src/locales/en.json to German, Japanese, and Spanish
✓ de.json created (1.2s)
✓ ja.json created (1.5s)
✓ es.json created (1.1s)
# Or use the CLI in CI/CD:
npx i18n-agent translate src/locales/en.json --lang de,ja,esअनुवाद की गुणवत्ता जाँचने की प्रक्रिया ऑटोमेट करें
आम समस्याएँ
SvelteKit में SSR लोकेल का रिसाव
svelte-i18n-locale-chain के साथ register() का उपयोग
ICU सिंटैक्स की त्रुटियाँ बिना सूचना के विफल होती हैं
अनूदित न हुई सामग्री का क्षणिक प्रदर्शन
सुझाई गई फ़ाइल संरचना
my-sveltekit-app/
├── src/
│ ├── lib/
│ │ └── i18n.ts # i18n configuration
│ ├── locales/
│ │ ├── en.json # Source language
│ │ ├── de.json # German
│ │ ├── ja.json # Japanese
│ │ └── es.json # Spanish
│ └── routes/
│ ├── +layout.svelte # Import i18n, guard isLoading
│ ├── +page.svelte
│ └── [lang]/ # Optional: locale-based routing
│ ├── +layout.ts # Set locale from URL param
│ ├── +layout.svelte
│ └── +page.svelte
├── svelte.config.js
└── package.jsonइनका भी अनुवाद करें:
i18n Agent अभी आज़माएँ
अपनी अनुवाद फ़ाइल यहाँ छोड़ें
JSON, YAML, PO, XML, CSV, Markdown, Properties
या ब्राउज़ करने के लिए क्लिक करें
लक्षित भाषाएँ
svelte-i18n-locale-chain के साथ लोकेल फ़ॉलबैक
pt-BR जैसे क्षेत्रीय लोकेल में कोई अनुवाद कुंजी न मिलने पर svelte-i18n पहले पैरेंट लोकेल pt की जाँच करने के बजाय सीधे डिफ़ॉल्ट लोकेल पर चला जाता है।
npm install svelte-i18n-locale-chainimport { initLocaleChain } from 'svelte-i18n-locale-chain';
initLocaleChain({
fallbacks: {
'pt-BR': ['pt', 'en'],
'zh-Hant-HK': ['zh-Hant', 'zh', 'en'],
},
defaultLocale: 'en',
});सपोर्ट किए जाने वाले सभी फ़्रेमवर्क और 75 बिल्ट-इन चेन की पूरी सूची के लिए हमारी लोकेल फ़ॉलबैक गाइड देखें। Learn more →