\n\n\n

{$content.title}

\n\n

{@const Title = $content.title}</h1>\n<!-- सामग्री को स्ट्रिंग के रूप में प्रस्तुत करने के लिए -->\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n</Step>\n\n<Step number={6} title=\"रूटिंग सेट करें\" isOptional={true}>\n\nनिम्नलिखित चरण दिखाते हैं कि SvelteKit में locale-आधारित रूटिंग कैसे सेट करें। यह आपके URLs को locale प्रीफिक्स (जैसे, `/en/about`, `/fr/about`) शामिल करने की अनुमति देता है, जिससे SEO और उपयोगकर्ता अनुभव बेहतर होता है।\n\n```bash\n.\n└─── src\n ├── app.d.ts # locale प्रकार को परिभाषित करें\n ├── hooks.server.ts # locale रूटिंग प्रबंधित करें\n ├── lib\n │   └── getLocale.ts # हेडर, कुकीज़ से locale जांचें\n ├── params\n │   └── locale.ts # locale पैरामीटर को परिभाषित करें\n └── routes\n ├── [[locale=locale]] # locale सेट करने के लिए route group में लपेटें\n │   ├── +layout.svelte # रूट के लिए स्थानीय लेआउट\n │   ├── +layout.ts\n │   ├── +page.svelte\n │   ├── +page.ts\n │   └── about\n │      ├── +page.svelte\n │      └── +page.ts\n └── +layout.svelte # फोंट और वैश्विक शैलियों के लिए रूट लेआउट\n```\n\n</Step>\n\n<Step number={7} title=\"सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें\">\n\nSvelteKit में, SSR के दौरान सही सामग्री प्रस्तुत करने के लिए सर्वर को उपयोगकर्ता की लोकल जानकारी जाननी होती है। हम URL या कुकीज़ से लोकल पता लगाने के लिए `hooks.server.ts` का उपयोग करते हैं।\n\n`src/hooks.server.ts` बनाएँ या संशोधित करें:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // जांचें कि क्या वर्तमान पथ पहले से ही किसी locale से शुरू होता है (जैसे /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // यदि URL में कोई locale मौजूद नहीं है (जैसे उपयोगकर्ता \"/\" पर जाता है), तो उन्हें पुनः निर्देशित करें\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // अस्थायी पुनर्निर्देशन\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nफिर, अनुरोध ईवेंट से उपयोगकर्ता की locale प्राप्त करने के लिए एक हेल्पर बनाएं:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * अनुरोध ईवेंट से उपयोगकर्ता की भाषा प्राप्त करें।\n * यह फ़ंक्शन `src/hooks.server.ts` में `handle` हुक में उपयोग किया जाता है।\n *\n * यह पहले Intlayer स्टोरेज (कुकीज़ या कस्टम हेडर) से भाषा प्राप्त करने का प्रयास करता है।\n * यदि भाषा नहीं मिलती है, तो यह ब्राउज़र के \"Accept-Language\" नेगोशिएशन पर वापस जाता है।\n *\n * @param event - SvelteKit से अनुरोध ईवेंट\n * @returns उपयोगकर्ता की भाषा\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Intlayer स्टोरेज (कुकीज़ या हेडर) से भाषा प्राप्त करने का प्रयास करें\n const storedLocale = getLocaleFromStorage({\n // SvelteKit कुकीज़ एक्सेस\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // SvelteKit हेडर एक्सेस\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // ब्राउज़र \"Accept-Language\" नेगोशिएशन पर फॉलबैक\n const negotiatorHeaders: Record<string, string> = {};\n\n // SvelteKit Headers ऑब्जेक्ट को साधारण Record<string, string> में कन्वर्ट करें\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // `Accept-Language` हेडर से लोकल की जांच करें\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // यदि कोई मैच नहीं मिलता है तो डिफ़ॉल्ट लोकल लौटाएं\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` आपके कॉन्फ़िगरेशन के अनुसार हेडर या कुकी से locale की जांच करेगा। अधिक जानकारी के लिए देखें [Configuration](https://intlayer.org/doc/configuration)।\n\n> `localeDetector` फ़ंक्शन `Accept-Language` हेडर को प्रोसेस करेगा और सबसे उपयुक्त मैच लौटाएगा।\n\nयदि locale कॉन्फ़िगर नहीं किया गया है, तो हम 404 त्रुटि लौटाना चाहते हैं। इसे आसान बनाने के लिए, हम एक `match` फ़ंक्शन बना सकते हैं जो जांचे कि locale मान्य है या नहीं:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **नोट:** सुनिश्चित करें कि आपकी `src/app.d.ts` में locale परिभाषा शामिल है:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\n`+layout.svelte` फ़ाइल के लिए, हम सब कुछ हटा सकते हैं, केवल स्थैतिक सामग्री रखने के लिए, जो i18n से संबंधित नहीं है:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nफिर, `[[locale=locale]]` समूह के अंतर्गत एक नया पेज और लेआउट बनाएं:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// सामान्य Load टाइप का उपयोग करें\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// रूट से locale के साथ Intlayer को इनिशियलाइज़ करें\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// लेआउट सामग्री शब्दकोश का उपयोग करें\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// होम कंटेंट डिक्शनरी का उपयोग करें\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n
\n\t

\n\t\t{$homeContent.title}\n\t

\n
\n\n\n```\n\n\n\n\n\nSEO के लिए, यह अनुशंसा की जाती है कि आप अपने routes को locale के साथ prefix करें (जैसे, `/en/about`, `/fr/about`)। यह component स्वचालित रूप से किसी भी लिंक के साथ वर्तमान locale को prefix करता है।\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nयदि आप SvelteKit से `goto` का उपयोग करते हैं, तो आप localized URL पर नेविगेट करने के लिए `getLocalizedUrl` के साथ वही लॉजिक उपयोग कर सकते हैं:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // स्थानीय भाषा के अनुसार /en/about या /fr/about पर नेविगेट करता है\n```\n\n\n\n\n\nउपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए, URL को अपडेट करें।\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n\n\n\n```\n\n\n\n\n\nअपने SvelteKit एप्लिकेशन में बैकएंड प्रॉक्सी जोड़ने के लिए, आप `vite-intlayer` प्लगइन द्वारा प्रदान किया गया `intlayerProxy` फ़ंक्शन उपयोग कर सकते हैं। यह प्लगइन URL, कुकीज़, और ब्राउज़र भाषा प्राथमिकताओं के आधार पर उपयोगकर्ता के लिए सबसे अच्छा locale स्वचालित रूप से पहचान लेगा।\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n\n\n\n\nintlayer संपादक सेट करने के लिए, आपको [intlayer संपादक दस्तावेज़](/hi/doc/concept/editor) का पालन करना होगा।\n\nintlayer CMS सेट करने के लिए, आपको [intlayer CMS दस्तावेज़](/hi/doc/concept/cms) का पालन करना होगा।\n\nintlayer संपादक चयनकर्ता को विज़ुअलाइज़ करने में सक्षम होने के लिए, आपको अपने intlayer कंटेंट में component सिंटैक्स का उपयोग करना होगा।\n\n```svelte fileName=\"Component.svelte\"\n\n\n
\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n
\n```\n\n\n\n\n\nयदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।\n\nइस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक [कंपाइलर](/hi/doc/compiler) / [एक्सट्रैक्टर](/hi/doc/concept/cli/extract) का प्रस्ताव करता है।\n\nइसे सेट करने के लिए, आप अपनी `intlayer.config.ts` फ़ाइल में एक `compiler` अनुभाग जोड़ सकते हैं:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... आपका शेष कॉन्फ़िगरेशन\n compiler: {\n /**\n * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।\n */\n enabled: true,\n\n /**\n * आउटपुट फ़ाइलों का पथ परिभाषित करता है\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।\n */\n saveComponents: false,\n\n /**\n * शब्दकोश कुंजी उपसर्ग\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nअपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nintlayerCompiler प्लगइन शामिल करने के लिए अपनी `vite.config.ts` अपडेट करें:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # या npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n\n\n\n### Git कॉन्फ़िगरेशन\n\nयह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।\n\n```plaintext fileName=\".gitignore\"\n# Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें\n.intlayer\n```\n\n---\n\n### आगे बढ़ें\n\n- **विज़ुअल एडिटर**: UI से सीधे अनुवाद संपादित करने के लिए [Intlayer Visual Editor](/hi/doc/concept/editor) को एकीकृत करें।\n- **CMS**: अपनी सामग्री प्रबंधन को बाहरी बनाएं [Intlayer CMS](/hi/doc/concept/cms) का उपयोग करके।\n","description":"अब i18next की जरूरत नहीं। 2026 में SvelteKit ऐप को बहुभाषी (i18n) बनाने का गाइड। AI एजेंट्स से अनुवाद करें और बंडल साइज़, SEO और परफॉर्मेंस ऑप्टिमाइज़ करें।","url":"https://intlayer.org/hi/doc/environment/sveltekit","datePublished":"2025-11-20","dateModified":"2026-05-31","version":"8.9.0","keywords":"अंतरराष्ट्रीयकरण, दस्तावेज़ीकरण, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"डेवलपर्स, सामग्री प्रबंधक"}}
    Author:
    Creation:2025-11-20Last update:2026-05-31

    Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)

    ide.intlayer.org

    सामग्री सूची

    विकल्पों पर इन्टलेयर क्यों?

    svelte-i18n या i18next जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

    पूर्ण SvelteKit कवरेज

    Intlayer को बहुभाषी रूटिंग, SSR समर्थन, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके SvelteKit के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।

    बंडल का आकार

    अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।

    रखरखाव

    आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए रखरखाव की सुविधा प्रदान करता है। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer पूरी तरह से टाइप किया गया है।

    एआई एजेंट

    सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और एजेंट कौशल, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।

    स्वचालन

    अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।

    प्रदर्शन

    बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।

    किसी भी देव के साथ स्केलिंग

    सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।

    SvelteKit एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

    शुरू करने के लिए, एक नया SvelteKit प्रोजेक्ट बनाएं। यहाँ अंतिम संरचना है जिसे हम बनाएंगे:

    bash
    .├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

    1. Dependencies इंस्टॉल करें

      npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

      bash
      npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init
      • intlayer: मुख्य i18n पैकेज।
      • svelte-intlayer: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
      • vite-intlayer: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।

    2. अपने प्रोजेक्ट का कॉन्फ़िगरेशन

      अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

    3. अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

      अपने vite.config.ts को अपडेट करें ताकि इसमें Intlayer प्लगइन शामिल हो। यह प्लगइन आपकी content फ़ाइलों के transpilation को संभालता है।

      vite.config.ts
      import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

    4. अपनी सामग्री घोषित करें

      अपने src फ़ोल्डर में कहीं भी अपनी सामग्री घोषणा फ़ाइलें बनाएं (जैसे, src/lib/content या अपने components के साथ)। ये फ़ाइलें आपके एप्लिकेशन के लिए अनुवाद योग्य सामग्री को परिभाषित करती हैं, प्रत्येक locale के लिए t() फ़ंक्शन का उपयोग करके।

    5. अपने Components में Intlayer का उपयोग करें

      अब आप किसी भी Svelte component में useIntlayer फ़ंक्शन का उपयोग कर सकते हैं। यह एक reactive store लौटाता है जो locale बदलने पर स्वचालित रूप से अपडेट हो जाता है। यह फ़ंक्शन वर्तमान locale का स्वचालित रूप से सम्मान करेगा (SSR और client-side navigation दोनों के दौरान)।

      नोट: useIntlayer एक Svelte store लौटाता है, इसलिए इसके reactive मान तक पहुँचने के लिए आपको `--- createdAt: 2025-11-20 updatedAt: 2026-05-31 title: अपने SvelteKit ऐप का अनुवाद कैसे करें – i18n गाइड 2026 description: जानें कि अपनी SvelteKit वेबसाइट को बहुभाषी कैसे बनाएं। Server-Side Rendering (SSR) का उपयोग करके इसे अंतरराष्ट्रीयकृत (i18n) और अनुवादित करने के लिए दस्तावेज़ का पालन करें। keywords:

      • अंतरराष्ट्रीयकरण
      • दस्तावेज़ीकरण
      • Intlayer
      • SvelteKit
      • JavaScript
      • SSR slugs:
      • doc
      • environment
      • sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
      • version: 7.1.10 date: 2025-11-20 changes: प्रारंभिक इतिहास

      Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)

    सामग्री सूची

    Intlayer क्या है?

    Intlayer एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है। यह SvelteKit के Server-Side Rendering (SSR) क्षमताओं के साथ सहजता से काम करता है।

    Intlayer के साथ, आप कर सकते हैं:

    • घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें जो कि कंपोनेंट स्तर पर होते हैं।
    • मेटाडेटा, रूट्स, और कंटेंट को गतिशील रूप से स्थानीयकृत करें।
    • स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें।
    • SEO-अनुकूल अंतरराष्ट्रीयकरण के लिए SvelteKit के SSR का लाभ उठाएं।

    SvelteKit एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

    शुरू करने के लिए, एक नया SvelteKit प्रोजेक्ट बनाएं। यहाँ अंतिम संरचना है जिसे हम बनाएंगे:

    bash
    .├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

    1. Dependencies इंस्टॉल करें

      npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

      bash
      npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init
      • intlayer: मुख्य i18n पैकेज।
      • svelte-intlayer: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
      • vite-intlayer: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।

    2. अपने प्रोजेक्ट का कॉन्फ़िगरेशन

      अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:

      intlayer.config.ts
      import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

    3. अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

      अपने vite.config.ts को अपडेट करें ताकि इसमें Intlayer प्लगइन शामिल हो। यह प्लगइन आपकी content फ़ाइलों के transpilation को संभालता है।

      vite.config.ts
      import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

    4. अपनी सामग्री घोषित करें

      अपने src फ़ोल्डर में कहीं भी अपनी सामग्री घोषणा फ़ाइलें बनाएं (जैसे, src/lib/content या अपने components के साथ)। ये फ़ाइलें आपके एप्लिकेशन के लिए अनुवाद योग्य सामग्री को परिभाषित करती हैं, प्रत्येक locale के लिए t() फ़ंक्शन का उपयोग करके।

    5. अपने Components में Intlayer का उपयोग करें

      प्रीफिक्स का उपयोग करना होगा (जैसे, $content.title)।

      src/lib/components/Component.svelte
      <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" वह key है जो चरण 4 में परिभाषित की गई है  const content = useIntlayer("hero-section");</script><!-- सामग्री को सरल सामग्री के रूप में रेंडर करें --><h1>{$content.title}</h1><!-- संपादक का उपयोग करके सामग्री को संपादन योग्य बनाने के लिए --><h1>{@const Title = $content.title}<Title /></h1><!-- सामग्री को स्ट्रिंग के रूप में प्रस्तुत करने के लिए --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

    6. रूटिंग सेट करें

      वैकल्पिक

      निम्नलिखित चरण दिखाते हैं कि SvelteKit में locale-आधारित रूटिंग कैसे सेट करें। यह आपके URLs को locale प्रीफिक्स (जैसे, /en/about, /fr/about) शामिल करने की अनुमति देता है, जिससे SEO और उपयोगकर्ता अनुभव बेहतर होता है।

      bash
      .└─── src    ├── app.d.ts                  # locale प्रकार को परिभाषित करें    ├── hooks.server.ts           # locale रूटिंग प्रबंधित करें    ├── lib    │   └── getLocale.ts          # हेडर, कुकीज़ से locale जांचें    ├── params    │   └── locale.ts             # locale पैरामीटर को परिभाषित करें    └── routes        ├── [[locale=locale]]     # locale सेट करने के लिए route group में लपेटें        │   ├── +layout.svelte    # रूट के लिए स्थानीय लेआउट        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # फोंट और वैश्विक शैलियों के लिए रूट लेआउट

    7. सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें

      SvelteKit में, SSR के दौरान सही सामग्री प्रस्तुत करने के लिए सर्वर को उपयोगकर्ता की लोकल जानकारी जाननी होती है। हम URL या कुकीज़ से लोकल पता लगाने के लिए hooks.server.ts का उपयोग करते हैं।

      src/hooks.server.ts बनाएँ या संशोधित करें:

      src/hooks.server.ts
      import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // जांचें कि क्या वर्तमान पथ पहले से ही किसी locale से शुरू होता है (जैसे /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // यदि URL में कोई locale मौजूद नहीं है (जैसे उपयोगकर्ता "/" पर जाता है), तो उन्हें पुनः निर्देशित करें  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // अस्थायी पुनर्निर्देशन    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

      फिर, अनुरोध ईवेंट से उपयोगकर्ता की locale प्राप्त करने के लिए एक हेल्पर बनाएं:

      src/lib/getLocale.ts
      import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * अनुरोध ईवेंट से उपयोगकर्ता की भाषा प्राप्त करें। * यह फ़ंक्शन `src/hooks.server.ts` में `handle` हुक में उपयोग किया जाता है। * * यह पहले Intlayer स्टोरेज (कुकीज़ या कस्टम हेडर) से भाषा प्राप्त करने का प्रयास करता है। * यदि भाषा नहीं मिलती है, तो यह ब्राउज़र के "Accept-Language" नेगोशिएशन पर वापस जाता है। * * @param event - SvelteKit से अनुरोध ईवेंट * @returns उपयोगकर्ता की भाषा */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer स्टोरेज (कुकीज़ या हेडर) से भाषा प्राप्त करने का प्रयास करें  const storedLocale = getLocaleFromStorage({    // SvelteKit कुकीज़ एक्सेस    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit हेडर एक्सेस    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // ब्राउज़र "Accept-Language" नेगोशिएशन पर फॉलबैक  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers ऑब्जेक्ट को साधारण Record<string, string> में कन्वर्ट करें  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` हेडर से लोकल की जांच करें  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // यदि कोई मैच नहीं मिलता है तो डिफ़ॉल्ट लोकल लौटाएं  return defaultLocale;};
      getLocaleFromStorage आपके कॉन्फ़िगरेशन के अनुसार हेडर या कुकी से locale की जांच करेगा। अधिक जानकारी के लिए देखें Configuration।
      localeDetector फ़ंक्शन Accept-Language हेडर को प्रोसेस करेगा और सबसे उपयुक्त मैच लौटाएगा।

      यदि locale कॉन्फ़िगर नहीं किया गया है, तो हम 404 त्रुटि लौटाना चाहते हैं। इसे आसान बनाने के लिए, हम एक match फ़ंक्शन बना सकते हैं जो जांचे कि locale मान्य है या नहीं:

      /src/params/locale.ts
      export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

      नोट: सुनिश्चित करें कि आपकी src/app.d.ts में locale परिभाषा शामिल है:

      typescript
      declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

      +layout.svelte फ़ाइल के लिए, हम सब कुछ हटा सकते हैं, केवल स्थैतिक सामग्री रखने के लिए, जो i18n से संबंधित नहीं है:

      src/+layout.svelte
      <script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

      फिर, [[locale=locale]] समूह के अंतर्गत एक नया पेज और लेआउट बनाएं:

      src/routes/[[locale=locale]]/+layout.ts
      import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// सामान्य Load टाइप का उपयोग करेंexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};
      src/routes/[[locale=locale]]/+layout.svelte
      <script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // रूट से locale के साथ Intlayer को इनिशियलाइज़ करें  $effect(() => {      setupIntlayer(data.locale);  });    // लेआउट सामग्री शब्दकोश का उपयोग करें    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>
      src/routes/[[locale=locale]]/+page.ts
      export const prerender = true;
      src/routes/[[locale=locale]]/+page.svelte
      <script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // होम कंटेंट डिक्शनरी का उपयोग करें    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

    8. अंतरराष्ट्रीयकृत लिंक

      वैकल्पिक

      SEO के लिए, यह अनुशंसा की जाती है कि आप अपने routes को locale के साथ prefix करें (जैसे, /en/about, /fr/about)। यह component स्वचालित रूप से किसी भी लिंक के साथ वर्तमान locale को prefix करता है।

      src/lib/components/LocalizedLink.svelte
      <script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // वर्तमान locale के साथ URL को prefix करने में मदद करता है  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

      यदि आप SvelteKit से goto का उपयोग करते हैं, तो आप localized URL पर नेविगेट करने के लिए getLocalizedUrl के साथ वही लॉजिक उपयोग कर सकते हैं:

      typescript
      import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // स्थानीय भाषा के अनुसार /en/about या /fr/about पर नेविगेट करता है

    9. भाषा स्विचर

      वैकल्पिक

      उपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए, URL को अपडेट करें।

      src/lib/components/LanguageSwitcher.svelte
      <script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // स्टोर में locale सेट करेगा और onLocaleChange को ट्रिगर करेगा        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

    10. बैकएंड प्रॉक्सी जोड़ें

      वैकल्पिक

      अपने SvelteKit एप्लिकेशन में बैकएंड प्रॉक्सी जोड़ने के लिए, आप vite-intlayer प्लगइन द्वारा प्रदान किया गया intlayerProxy फ़ंक्शन उपयोग कर सकते हैं। यह प्लगइन URL, कुकीज़, और ब्राउज़र भाषा प्राथमिकताओं के आधार पर उपयोगकर्ता के लिए सबसे अच्छा locale स्वचालित रूप से पहचान लेगा।

      vite.config.ts
      import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

    11. intlayer संपादक / CMS सेट करें

      वैकल्पिक

      intlayer संपादक सेट करने के लिए, आपको intlayer संपादक दस्तावेज़ का पालन करना होगा।

      intlayer CMS सेट करने के लिए, आपको intlayer CMS दस्तावेज़ का पालन करना होगा।

      intlayer संपादक चयनकर्ता को विज़ुअलाइज़ करने में सक्षम होने के लिए, आपको अपने intlayer कंटेंट में component सिंटैक्स का उपयोग करना होगा।

      Component.svelte
      <script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component"); // सामग्री को component के रूप में उपयोग करें</script><div>  <!-- सामग्री को सरल सामग्री के रूप में रेंडर करें -->  <h1>{$content.title}</h1>  <!-- सामग्री को एक component के रूप में रेंडर करें (संपादक के लिए आवश्यक) -->  {@const Component = $content.component}<Component /></div>

    12. अपने घटकों की सामग्री निकालें

      वैकल्पिक

      यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

      इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

      इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में एक compiler अनुभाग जोड़ सकते हैं:

      intlayer.config.ts
      import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... आपका शेष कॉन्फ़िगरेशन
  compiler: {
    /**
     * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
     */
    enabled: true,

    /**
     * आउटपुट फ़ाइलों का पथ परिभाषित करता है
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
     */
    saveComponents: false,

    /**
     * शब्दकोश कुंजी उपसर्ग
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

      अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ

      bash
      npx intlayer extract

    Git कॉन्फ़िगरेशन

    यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।

    .gitignore
    # Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें.intlayer

    आगे बढ़ें

    • विज़ुअल एडिटर: UI से सीधे अनुवाद संपादित करने के लिए Intlayer Visual Editor को एकीकृत करें।
    • CMS: अपनी सामग्री प्रबंधन को बाहरी बनाएं Intlayer CMS का उपयोग करके।
    Vite और SvelteVite और Preact