---
createdAt: 2025-08-06
updatedAt: 2026-08-06
title: "Solid Start i18n - अपने ऐप का अनुवाद करने का पूर्ण गाइड"
description: "अब i18next की आवश्यकता नहीं। 2026 में बहुभाषी (i18n) SolidStart ऐप बनाने की गाइड। सर्वर-रेंडर्ड लोकेल रूटिंग, hreflang, साइटमैप और AI-सहायता प्राप्त अनुवाद।"
keywords:
- Internationalization
- Documentation
- Intlayer
- SolidStart
- Solid
- i18n
- TypeScript
- Locale Routing
- Sitemap
slugs:
- doc
- environment
- solid-start
applicationTemplate: https://github.com/aymericzip/intlayer-solid-start-template
history:
- version: 9.1.3
date: 2025-08-06
changes: "प्रारंभिक इतिहास"
author: aymericzip
---
# Intlayer का उपयोग करके अपनी SolidStart वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
## विषय सूची
यह गाइड एक **सर्वर-रेंडर्ड** SolidStart एप्लिकेशन को कवर करती है: अनुरोध पर लोकेल का पता लगाया जाता है, पेज सही भाषा में सर्वर पर रेंडर होते हैं, और खोज इंजनों के लिए आवश्यक ``, `hreflang` और sitemap सिग्नल सर्वर-साइड से जारी किए जाते हैं।
## अन्य विकल्पों की तुलना में Intlayer क्यों?
`@solid-primitives/i18n` या `i18next` जैसे प्रमुख समाधानों की तुलना में, Intlayer एकीकृत अनुकूलन प्रदान करने वाला समाधान है जैसे:
Intlayer को Solid के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है, जो **कंपोनेंट-स्तरीय सामग्री स्कोपिंग**, **प्रतिक्रियाशील (reactive) अनुवाद**, और अंतर्राष्ट्रीयकरण (i18n) को बढ़ाने के लिए आवश्यक सभी सुविधाएं प्रदान करता है।
अपनी पृष्ठों में विशाल JSON फ़ाइलों को लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। Intlayer आपके **बंडल और पेज के आकार को 50% तक कम करने में मदद करता है**।
अपने एप्लिकेशन की सामग्री को स्कोप करने से बड़े पैमाने के अनुप्रयोगों के लिए **रखरखाव में आसानी** होती है। आप अपने संपूर्ण कोडबेस की समीक्षा किए बिना किसी एक सुविधा फ़ोल्डर को डुप्लिकेट या हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer **पूरी तरह से टाइप किया गया (fully typed)** है।
सामग्री को एक साथ रखने से बड़े भाषा मॉडल (LLMs) के लिए **आवश्यक संदर्भ (context) कम हो जाता है**। Intlayer कई टूल के साथ आता है, जैसे गायब अनुवादों का परीक्षण करने के लिए **CLI**, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)**, और **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, ताकि AI एजेंट्स के लिए डेवलपर अनुभव (DX) और भी सुगम हो सके।
अपने AI प्रदाता की लागत पर अपनी पसंद के LLM का उपयोग करके अपनी CI/CD पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। Intlayer सामग्री निष्कर्षण को स्वचालित करने के लिए एक **कंपाइलर**, साथ ही **पृष्ठभूमि में अनुवाद** करने में मदद करने के लिए एक [वेब प्लेटफॉर्म](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) भी प्रदान करता है।
विशाल JSON फ़ाइलों को कंपोनेंट्स से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता में समस्याएं आ सकती हैं। Intlayer निर्माण समय (build time) पर आपकी सामग्री लोडिंग को अनुकूलित करता है।
केवल एक i18n समाधान से अधिक, Intlayer एक **स्व-होस्टेड [विजुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** और एक **[पूर्ण CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** प्रदान करता है ताकि आप **वास्तविक समय (real-time)** में अपनी बहुभाषी सामग्री को प्रबंधित कर सकें, जिससे अनुवादकों, कॉपीराइटर्स और अन्य टीम के सदस्यों के साथ सहज सहयोग हो सके। सामग्री को स्थानीय रूप से और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
---
## SolidStart एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण गाइड
npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
```bash packageManager="npm"
npx intlayer init --interactive
```
```bash packageManager="pnpm"
pnpm dlx intlayer@canary init --interactive
```
```bash packageManager="yarn"
yarn dlx intlayer@canary init --interactive
```
```bash packageManager="bun"
bunx intlayer@canary init --interactive
```
> `--interactive` फ़्लैग वैकल्पिक है। यदि आप एक AI एजेंट हैं तो `intlayer-cli init` का उपयोग करें।
> यह कमांड आपके वातावरण का पता लगाएगा और आवश्यक पैकेज स्थापित करेगा। उदाहरण के लिए:
```bash packageManager="npm"
npm install intlayer solid-intlayer vite-intlayer
```
```bash packageManager="pnpm"
pnpm add intlayer solid-intlayer vite-intlayer
```
```bash packageManager="yarn"
yarn add intlayer solid-intlayer vite-intlayer
```
```bash packageManager="bun"
bun add intlayer solid-intlayer vite-intlayer
```
- **intlayer**
कोर पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md), ट्रांसपाइलेशन, और [CLI कमांड](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/index.md) के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।
- **solid-intlayer**
पैकेज जो Intlayer को Solid एप्लिकेशन के साथ एकीकृत करता है। यह Solid अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता (context providers) और हुक्स (hooks) प्रदान करता है।
- **vite-intlayer**
Intlayer को [Vite बंडलर](https://vite.dev/guide/why.html#why-bundle-for-production) के साथ एकीकृत करने के लिए Vite प्लगइन शामिल है, साथ ही लोकेल-रूटिंग हैंडलर जो उपयोगकर्ता की पसंदीदा भाषा का पता लगाता है, कुकीज़ प्रबंधित करता है, और URL पुनर्निर्देशन (redirection) संभालता है।
> यहाँ `vite-intlayer` एक सर्वर-साइड विषय है, न कि केवल एक बिल्ड-टाइम विषय: यह अनुरोध हैंडलर की आपूर्ति करता है जिसे SolidStart का Nitro सर्वर चलाता है। इसे `dependencies` में रखना सुरक्षित डिफ़ॉल्ट है — आप इसे केवल तभी `devDependencies` में ले जा सकते हैं यदि आप निर्मित `.output` निर्देशिका को तैनात करते हैं, जिसमें Nitro हैंडलर को इनलाइन करता है।
अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएं:
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
import { type IntlayerConfig, Locales } from "intlayer";
const config: IntlayerConfig = {
internationalization: {
locales: [
Locales.ENGLISH,
Locales.FRENCH,
Locales.SPANISH,
// आपकी अन्य भाषाएँ
],
defaultLocale: Locales.ENGLISH,
},
routing: {
mode: "prefix-no-default",
},
};
export default config;
```
`prefix-no-default` के साथ, डिफ़ॉल्ट लोकेल बिना उपसर्ग वाले URL से परोसा जाता है:
```plaintext
/ /about → अंग्रेजी (डिफ़ॉल्ट लोकेल)
/fr /fr/about → फ्रेंच
/es /es/about → स्पैनिश
```
> इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, [कॉन्फ़िगरेशन दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) देखें।
अपने कॉन्फ़िगरेशन में Intlayer प्लगइन जोड़ें:
```typescript fileName="vite.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
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 प्लगइन आपकी सामग्री घोषणा फ़ाइलों को बनाता है, विकास मोड में उन्हें देखता है, और एप्लिकेशन के अंदर Intlayer पर्यावरण चर (environment variables) को परिभाषित करता है। यह ऐसे उपनाम (aliases) भी प्रदान करता है जो प्रदर्शन को अनुकूलित करते हैं।
### लोकेल रूटिंग प्लगइन के साथ आती है
SolidStart [Nitro](https://nitro.build) पर चलता है, और `intlayer()` अपने लोकेल-रूटिंग हैंडलर को सीधे Nitro के सर्वर पाइपलाइन में पंजीकृत करता है (`routing.enableProxy` विकल्प के माध्यम से, जो डिफ़ॉल्ट रूप से `true` है)। कुछ भी जोड़ने की आवश्यकता नहीं है: निर्मित सर्वर पर, प्रत्येक अनुरोध को राउटर तक पहुंचने से पहले जांचा जाता है, और
- लोकेल को URL उपसर्ग से, फिर `INTLAYER_LOCALE` कुकी से, फिर `Accept-Language` हेडर से पढ़ा जाता है;
- एक गैर-उपसर्ग वाला URL इसके स्थानीयकृत समकक्ष पर पुनर्निर्देशित किया जाता है जब हल की गई लोकेल डिफ़ॉल्ट नहीं होती है (`/` → `/fr`);
- एक अनावश्यक उपसर्ग वाले URL को उसके विहित (canonical) रूप में वापस पुनर्निर्देशित किया जाता है (`/en/about` → `/about`);
- लोकेल कुकी को प्रतिक्रिया पर वापस लिखा जाता है।
अनुवाद संग्रहीत करने के लिए अपनी सामग्री घोषणाएं बनाएं और प्रबंधित करें:
```tsx fileName="src/contents/home.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
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;
```
```json fileName="src/contents/home.content.json" contentDeclarationFormat="json"
{
"$schema": "https://intlayer.org/schema.json",
"key": "home-page",
"content": {
"title": {
"nodeType": "translation",
"translation": {
"en": "Hello world!",
"fr": "Bonjour le monde !",
"es": "¡Hola mundo!"
}
},
"metaTitle": "SolidStart + Intlayer",
"metaDescription": {
"nodeType": "translation",
"translation": {
"en": "A SolidStart application internationalized with Intlayer.",
"fr": "Une application SolidStart internationalisée avec Intlayer.",
"es": "Una aplicación SolidStart internacionalizada con Intlayer."
}
},
"documentation": {
"nodeType": "translation",
"translation": {
"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."
}
}
}
}
```
> ⚠️ **SolidStart-विशिष्ट चेतावनी**: `src/routes` के तहत प्रत्येक `.ts` / `.tsx` फ़ाइल एक मार्ग बन जाती है, और एक `.content.ts` फ़ाइल में डिफ़ॉल्ट निर्यात होता है, इसलिए इसे एक पेज के रूप में ले लिया जाएगा। अपने **पेजों** की सामग्री घोषणाओं को मार्ग निर्देशिका के बाहर रखें (`src/contents/` अच्छी तरह से काम करता है)। **कंपोनेंट्स** की सामग्री सह-स्थित रह सकती है, क्योंकि `src/components` को फ़ाइल-सिस्टम राउटर द्वारा स्कैन नहीं किया जाता है।
> आपकी सामग्री घोषणाओं को आपके एप्लिकेशन में कहीं भी परिभाषित किया जा सकता है जब तक कि वे `contentDir` निर्देशिका (डिफ़ॉल्ट रूप से, `./src`) में शामिल हैं, और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से, `.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}`) से मेल खाते हैं।
>
> अधिक विवरण के लिए, [सामग्री घोषणा दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md) देखें।
इस चरण का लक्ष्य प्रत्येक भाषा को अपना URL देना है, जिसे खोज इंजन अनुक्रमित (index) करते हैं।
अपने पेजों को एक **वैकल्पिक गतिशील खंड (optional dynamic segment)** के तहत ले जाएं। SolidStart के फ़ाइल-सिस्टम राउटर में, `[[locale]]` `:locale?` पाथ पैटर्न में संकलित होता है:
```plaintext
src/routes/
[[locale]].tsx ← लेआउट जो सेगमेंट को मान्य करता है
[[locale]]/
index.tsx → / और /fr और /es
about.tsx → /about और /fr/about और /es/about
[...404].tsx → किसी भी अन्य चीज़ के लिए कैच-ऑल
```
लेआउट फ़ाइल का एकमात्र काम सेगमेंट को कॉन्फ़िगर किए गए लोकेल तक सीमित करना है:
```tsx fileName="src/routes/[[locale]].tsx" codeFormat="typescript"
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?` को दो पैटर्न में विस्तारित करता है — एक सेगमेंट के साथ और एक बिना — और विशिष्टता के घटते क्रम में उन्हें आजमाता है। `matchFilters` वही है जो एक काम करने वाले सेटअप और एक भ्रमित करने वाले सेटअप के बीच अंतर पैदा करता है:
| URL | matchFilters के बिना | matchFilters के साथ |
| ----------- | -------------------------------------------- | ------------------------------------ |
| `/fr/about` | फ्रेंच अबाउट पेज | फ्रेंच अबाउट पेज |
| `/about` | अबाउट पेज (स्टैटिक सेगमेंट जीतता है) | अबाउट पेज |
| `/unknown` | **होम पेज**, चुपचाप, `locale=unknown` के साथ | कोई मैच नहीं → कैच-ऑल 404 पर जाता है |
> यदि आप `'prefix-all'` रूटिंग मोड का उपयोग करते हैं तो `[[locale]]` के बजाय `[locale]` (आवश्यक) को प्राथमिकता दें, और `'no-prefix'` या `'search-params'` के लिए सेगमेंट को पूरी तरह से हटा दें।
URL लोकेल के लिए सत्य का एकमात्र स्रोत है: मिडलवेयर ने पहले ही अनुरोध को उसके स्थानीयकृत मार्ग पर पुनर्निर्देशित कर दिया है, इसलिए रूट लेआउट में पाथ को पढ़ने से सर्वर रेंडर और क्लाइंट हाइड्रेशन सहमत रहते हैं, और हर क्लाइंट-साइड नेविगेशन लोकेल को मुफ्त में अपडेट करता है।
```tsx fileName="src/app.tsx" codeFormat="typescript"
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;
// सर्वर entry-server.tsx में रेंडर करता है;
// लोकेल के बीच क्लाइंट-साइड नेविगेशन को विशेषताओं को स्वयं अपडेट करना होगा।
createEffect(() => {
if (isServer) return;
document.documentElement.lang = locale();
document.documentElement.dir = getHTMLTextDir(locale());
});
return (
{props.children}
);
};
export default function App() {
return (
);
}
```
> `IntlayerProvider` अपने `locale` प्रोप पर प्रतिक्रिया करता है, इसलिए JSX के अंदर एक्सेस कॉलिंग `locale()` पास करना पर्याप्त है — Solid इसे एक गेटर में संकलित करता है, और URL बदलने पर पूरा ट्री नई भाषा में फिर से रेंडर होता है।
`` तत्व `Router` के बाहर `entry-server.tsx` द्वारा रेंडर किया जाता है। इसके बजाय अनुरोध URL से लोकेल पढ़ें:
```tsx fileName="src/entry-server.tsx" codeFormat="typescript"
// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";
import { defaultLocale, getHTMLTextDir, getLocaleFromPath } from "intlayer";
import { getRequestEvent } from "solid-js/web";
export default createHandler(() => (
{
const url = getRequestEvent()?.request.url ?? "/";
const locale = getLocaleFromPath(url) ?? defaultLocale;
return (
{assets}
{children}
{scripts}
);
}}
/>
));
```
क्रॉलर्स को अब पहले बाइट पर सही भाषा मिलती है:
```html
```
अपने संपूर्ण एप्लिकेशन में अपनी सामग्री शब्दकोशों तक पहुंचें:
```tsx fileName="src/routes/[[locale]]/index.tsx" codeFormat="typescript"
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 (
{content.metaTitle.value}
{content.title}
{content.documentation}
);
}
```
> Solid में, `useIntlayer` प्रतिक्रियाशील सामग्री (जैसे `content`) लौटाता है। आप इसकी संपत्तियों को सीधे एक्सेस कर सकते हैं।
> यदि आप अपनी सामग्री को `string` विशेषता जैसे `alt`, `title`, `href`, `aria-label`, आदि में उपयोग करना चाहते हैं, तो आप फ़ंक्शन के मान का उपयोग कर सकते हैं, जैसे:
>
> ```html
>
>
>
> ```
> `useIntlayer` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useIntlayer.md) देखें।
सामग्री नोड्स केवल साधारण अनुवादों तक सीमित नहीं हैं। उदाहरण के लिए, एक बहुवचन काउंटर:
```typescript fileName="src/components/Counter.content.ts" codeFormat="typescript"
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;
```
```tsx fileName="src/components/Counter.tsx" codeFormat="typescript"
import { useIntlayer } from "solid-intlayer";
import { createSignal } from "solid-js";
export default function Counter() {
const [count, setCount] = createSignal(0);
const content = useIntlayer("counter");
return (
);
}
```
`plural()` सक्रिय लोकेल के लिए `Intl.PluralRules` के माध्यम से श्रेणी का चयन करता है, इसलिए दो से अधिक बहुवचन रूपों वाली भाषाएं बिना किसी अतिरिक्त कोड के काम करती हैं।
एक कस्टम `Link` कंपोनेंट बनाएं जो आंतरिक URL को वर्तमान भाषा के साथ स्वचालित रूप से उपसर्ग करता है:
```tsx fileName="src/components/LocalizedLink.tsx" codeFormat="typescript"
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 = (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 ;
};
```
```tsx fileName="src/components/Nav.tsx" codeFormat="typescript"
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 (
);
};
```
एक बार `href="/about"` लिखने पर अब सक्रिय लोकेल के आधार पर `/about`, `/fr/about` या `/es/about` उत्पन्न होता है — आपके पेजों में कहीं भी मैन्युअल उपसर्ग की आवश्यकता नहीं है।
स्विचर को `
`hreflang` एनोटेशन खोज इंजनों को बताते हैं कि `/about`, `/fr/about` और `/es/about` अलग-अलग भाषाओं में एक ही पेज हैं। `getMultilingualUrls` आपके रूटिंग मोड का पालन करते हुए विहित (लोकेल-मुक्त) मार्ग से उन्हें प्राप्त करता है, इसलिए कुछ भी हार्ड-कोड नहीं किया गया है:
```tsx fileName="src/components/AlternateLinks.tsx" codeFormat="typescript"
import {
defaultLocale,
getMultilingualUrls,
getPathWithoutLocale,
} from "intlayer";
import { type Component, For } from "solid-js";
export type AlternateLinksProps = {
/** रेंडर किए जा रहे पेज का पूर्ण URL। */
url: string;
};
export const AlternateLinks: Component = (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 (
<>
{([locale, localizedUrl]) => (
)}
locale === defaultLocale)?.[1]
}
hreflang="x-default"
rel="alternate"
/>
);
};
```
इसे दस्तावेज़ प्रमुख (head) में रेंडर करें, जहाँ अनुरोध URL उपलब्ध है:
```tsx fileName="src/entry-server.tsx" codeFormat="typescript"
import { AlternateLinks } from "~/components/AlternateLinks";
// … के अंदर, अन्य मेटा टैग के बगल में:
;
```
`GET /fr/about` फिर प्रदान करता है:
```html
```
> **`@solidjs/meta` पर ध्यान दें**: लिखते समय, `@solidjs/meta` से `` और `<Meta>` हाइड्रेशन के बाद क्लाइंट पर लागू होते हैं, लेकिन SolidStart v2 में सर्वर-रेंडर्ड `<head>` में उत्सर्जित **नहीं** होते हैं। जब तक इसे अपस्ट्रीम में ठीक नहीं किया जाता, तब तक क्रॉलर्स को बिना JavaScript के देखने के लिए आवश्यक टैग — `canonical`, `hreflang`, और यदि आवश्यक हो तो `title` / `description` — को सीधे `entry-server.tsx` में रेंडर करें, जैसा कि ऊपर दिखाया गया है।
</Step>
<Step number={12} title="पेज न मिलने (404) को प्रबंधित करें" isOptional={true}>
`src/routes` के रूट पर एक स्प्लैट मार्ग (splat route) हर उस रास्ते को पकड़ता है जिससे लोकेल सेगमेंट मेल नहीं खाता — जिसमें `matchFilters` द्वारा अस्वीकार किए गए अमान्य लोकेल उपसर्ग शामिल हैं। चूँकि लोकेल अभी भी रूट लेआउट के माध्यम से URL से आता है, इसलिए 404 पेज आगंतुक की भाषा में प्रदर्शित होता है:
```tsx fileName="src/routes/[...404].tsx" codeFormat="typescript"
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}
{content.title}
{content.backHome}
);
}
```
| अनुरोध | परिणाम |
| ----------------- | --------------------------------------------- |
| `/xx` | `404` — `xx` एक कॉन्फ़िगर की गई लोकेल नहीं है |
| `/nonexistent` | डिफ़ॉल्ट लोकेल में `404` |
| `/fr/nonexistent` | फ्रेंच में `404` (`Page introuvable`) |
Intlayer का साइटमैप जनरेटर प्रत्येक पाथ को प्रति लोकेल एक प्रविष्टि में विस्तारित करता है और उनके बीच `xhtml:link` विकल्पों को जोड़ता है, इसलिए मार्ग को केवल विहित (canonical), लोकेल-मुक्त रास्तों को सूचीबद्ध करना पड़ता है।
> केवल फ्लैट URL उत्सर्जित करने वाले बुनियादी जनरेटरों के विपरीत, Intlayer प्रत्येक पृष्ठ के प्रत्येक स्थानीयकृत रूप के बीच द्विदिश (bidirectional) लिंक जोड़ता है, जो खोज इंजनों को स्थानीयकृत URL को जोड़ने और सही दर्शकों को सही परोसने में मदद करता है।
SolidStart HTTP विधि को निर्यात करने वाली फ़ाइल को एक API मार्ग में बदल देता है, और पथ से `.ts` एक्सटेंशन हटा देता है — इसलिए `src/routes/sitemap.xml.ts` को `/sitemap.xml` पर परोसा जाता है:
```typescript fileName="src/routes/sitemap.xml.ts" codeFormat={["typescript", "esm", "commonjs"]}
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" },
});
};
```
```xml fileName="output of GET /sitemap.xml"
https://example.com/aboutmonthly0.8
```
> API मार्ग वैकल्पिक मापदंडों का समर्थन नहीं करते हैं, इसलिए इस फ़ाइल को `[[locale]]` सेगमेंट से बाहर, `src/routes` के रूट पर रखें। साइटमैप में पहले से ही हर लोकेल शामिल है।
आप `getMultilingualUrls` के साथ उसी तरह से `robots.txt` बना सकते हैं, ताकि `Disallow` प्रविष्टियां किसी संवेदनशील मार्ग के प्रत्येक स्थानीयकृत वर्तनी को कवर करें:
```typescript fileName="src/routes/robots.txt.ts" codeFormat={["typescript", "esm", "commonjs"]}
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" } }
);
```
आप सर्वर फ़ंक्शन या API मार्ग के अंदर से वर्तमान लोकेल तक पहुंचना चाह सकते हैं।
इस तरह के उपसर्ग आधारित सेटअप में, **URL आधिकारिक है**: `getLocaleFromPath` अनुरोध URL से उपसर्ग पढ़ता है। `getLocale` उन अनुरोधों के लिए फ़ॉलबैक है जो कोई लोकेल उपसर्ग नहीं ले जाते हैं — यह `INTLAYER_LOCALE` कुकी का निरीक्षण करता है, फिर `x-intlayer-locale` हेडर, फिर `Accept-Language` पर बातचीत करता है।
```tsx fileName="src/routes/[[locale]]/index.tsx" codeFormat="typescript"
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({
// अनुरोध से कुकी प्राप्त करें (डिफ़ॉल्ट: 'INTLAYER_LOCALE')
getCookie: (name) =>
getCookie(name, request?.headers.get("cookie") ?? ""),
// अनुरोध से हेडर प्राप्त करें (डिफ़ॉल्ट: 'x-intlayer-locale'),
// Accept-Language वार्ता पर वापस जाना
getHeader: (name) => request?.headers.get(name) ?? undefined,
}));
// getIntlayer() का उपयोग करके कंपोनेंट के बाहर कुछ सामग्री प्राप्त करें
const content = getIntlayer("home-page", locale);
return { locale, title: String(content.title) };
};
export default function Page() {
const data = createAsync(() => loadLocalizedData());
return
{data()?.title}
;
}
```
> यहाँ केवल `getLocale` पर भरोसा न करें: लोकेल कुकी केवल तभी लिखी जाती है जब कोई आगंतुक सक्रिय रूप से भाषा बदलता है, इसलिए `/fr/...` की पहली यात्रा डिफ़ॉल्ट लोकेल में हल होगी।
यदि आपके पास मौजूदा कोडबेस है, तो हज़ारों फ़ाइलों को परिवर्तित करने में समय लग सकता है।
इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके कंपोनेंट्स को बदलने और सामग्री निकालने के लिए एक [कंपाइलर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/compiler.md) / [एक्सट्रैक्टर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/extract.md) का प्रस्ताव करता है।
इसे सेट करने के लिए, आप अपनी `intlayer.config.ts` फ़ाइल में एक `compiler` अनुभाग जोड़ सकते हैं:
```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... आपके कॉन्फ़िगरेशन का शेष भाग
compiler: {
/**
* इंगित करता है कि कंपाइलर सक्षम होना चाहिए या नहीं।
*/
enabled: true,
/**
* आउटपुट फ़ाइलों का पथ परिभाषित करता है
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* इंगित करता है कि कंपोनेंट्स को ट्रांसफॉर्म करने के बाद सेव किया जाना चाहिए या नहीं।
*
* - यदि `true` है, तो कंपाइलर डिस्क में कंपोनेंट फ़ाइल को फिर से लिखेगा। इसलिए परिवर्तन स्थायी होगा, और कंपाइलर अगली प्रक्रिया के लिए परिवर्तन को छोड़ देगा। उस तरह, कंपाइलर ऐप को बदल सकता है, और फिर इसे हटाया जा सकता है।
*
* - यदि `false` है, तो कंपाइलर केवल बिल्ड आउटपुट में कोड में `useIntlayer()` फ़ंक्शन कॉल को इंजेक्ट करेगा, और बेस कोडबेस को बरकरार रखेगा। परिवर्तन केवल मेमोरी में किया जाएगा।
*/
saveComponents: false,
/**
* डिक्शनरी कुंजी उपसर्ग
*/
dictionaryKeyPrefix: "",
},
};
export default config;
```
अपने कंपोनेंट्स को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएं
```bash packageManager="npm"
npx intlayer extract
```
```bash packageManager="pnpm"
pnpm intlayer extract
```
```bash packageManager="yarn"
yarn intlayer extract
```
```bash packageManager="bun"
bun x intlayer extract
```
> इसके बाद अपने पेजों की जनरेट की गई सामग्री फ़ाइलों को `src/routes` से बाहर ले जाएं, जैसा कि चरण 5 में बताया गया है।
> v9 से, `intlayerCompiler` को `intlayer` प्लगइन में शामिल किया गया है। इसलिए आपको इसे मैन्युअल रूप से जोड़ने की आवश्यकता नहीं है।
`intlayerCompiler` प्लगइन को शामिल करने के लिए अपना `vite.config.ts` अपडेट करें:
```ts fileName="vite.config.ts"
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(), // कंपाइलर प्लगइन जोड़ता है
],
});
```
```bash packageManager="npm"
npm run build # या npm run dev
```
```bash packageManager="pnpm"
pnpm run build # या pnpm run dev
```
```bash packageManager="yarn"
yarn build # या yarn dev
```
```bash packageManager="bun"
bun run build # या bun run dev
```
Intlayer TypeScript के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल संवर्धन (module augmentation) का उपयोग करता है।
सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वचालित रूप से जनरेट किए गए प्रकार शामिल हैं:
```json5 fileName="tsconfig.json"
{
compilerOptions: {
// ... आपके मौजूदा कॉन्फ़िगरेशन
},
include: [
"src",
"*.ts",
".intlayer/**/*.ts", // स्वचालित रूप से जनरेट किए गए प्रकार शामिल करें
],
}
```
डिक्शनरी कुंजियाँ और सामग्री पथ अब संकलन समय (compile time) पर जाँचे जाते हैं:
```tsx
useIntlayer("home-page"); // ✅
useIntlayer("hom-page"); // ❌ Argument of type '"hom-page"' is not assignable to parameter of type 'keyof __DictionaryRegistry'
```
---
## अपने सेटअप का सत्यापन
सर्वर बनाएं और प्रारंभ करें, फिर जांचें कि ये अनुरोध अपेक्षा के अनुसार व्यवहार करते हैं:
```bash
npm run build
node .output/server/index.mjs
```
| अनुरोध | अपेक्षित प्रतिक्रिया |
| ---------------------------------------- | -------------------------------------- |
| `GET /` | `200` — अंग्रेजी |
| `GET /` `Accept-Language: fr` के साथ | `302` → `/fr` |
| `GET /` `INTLAYER_LOCALE=es` कुकी के साथ | `302` → `/es` |
| `GET /fr` | `200` — फ्रेंच, `` |
| `GET /fr/about` | `200` — फ्रेंच अबाउट पेज |
| `GET /en/about` | `302` → `/about` (कैनोनिकल रीडायरेक्ट) |
| `GET /xx` | `404` |
| `GET /fr/nonexistent` | `404` फ्रेंच में |
| `GET /sitemap.xml` | `200` — बहुभाषी XML साइटमैप |
पेज को रेंडर करने वाली पंक्तियाँ `vite dev` के तहत समान रूप से व्यवहार करती हैं। तीन रीडायरेक्ट पंक्तियाँ केवल एक निर्मित सर्वर पर लागू होती हैं जब तक कि आप स्वयं हैंडलर को मिडलवेयर के रूप में पंजीकृत न करें — चरण 3 देखें।
> डेवलपर सर्वर को Bun (`bun --bun vite dev`) के बजाय Node (`vite dev`) पर चलाएं: SolidStart का SSR वर्तमान में Bun रनटाइम के तहत `Expected a Response object, but received 'NodeResponse'` के साथ विफल रहता है। यह Intlayer से असंबंधित है — यह सादे टेम्पलेट पर भी पुनः प्रस्तुत होता है — और केवल देव सर्वर को प्रभावित करता है, `vite build` को नहीं।
---
## Git कॉन्फ़िगरेशन
Intlayer द्वारा जनरेट की गई फ़ाइलों को अनदेखा करने की सिफारिश की जाती है। यह आपको उन्हें अपने Git रिपॉजिटरी में प्रतिबद्ध (commit) करने से बचने की अनुमति देता है।
ऐसा करने के लिए, आप अपनी `.gitignore` फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
```plaintext fileName=".gitignore"
# Intlayer द्वारा जनरेट की गई फ़ाइलों को अनदेखा करें
.intlayer
```
---
## VS Code एक्सटेंशन
Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक **Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।
[VS Code मार्केटप्लेस से इंस्टॉल करें](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
यह एक्सटेंशन प्रदान करता है:
- अनुवाद कुंजियों के लिए **ऑटो-कंपलीशन**।
- गायब अनुवादों के लिए **वास्तविक समय त्रुटि पहचान**।
- अनुवादित सामग्री का **इनलाइन पूर्वावलोकन**।
- आसानी से अनुवाद बनाने और अपडेट करने के लिए **त्वरित कार्य (quick actions)**।
---
## आगे बढ़ें
आगे बढ़ने के लिए, आप [विजुअल एडिटर](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) को लागू कर सकते हैं या [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) का उपयोग करके अपनी सामग्री को बाहरी रूप से प्रबंधित कर सकते हैं।
---
## दस्तावेज़ीकरण संदर्भ
- [Intlayer दस्तावेज़](https://intlayer.org)
- [SolidStart दस्तावेज़](https://start.solidjs.com)
- [useIntlayer हुक](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useIntlayer.md)
- [useLocale हुक](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useLocale.md)
- [सामग्री घोषणा](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
- [कॉन्फ़िगरेशन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
> })
> })
> ```
> `useIntlayer` हुक के बारे में अधिक जानने के लिए, [दस्तावेज़](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useIntlayer.md) देखें।
सामग्री नोड्स केवल साधारण अनुवादों तक सीमित नहीं हैं। उदाहरण के लिए, एक बहुवचन काउंटर:
```typescript fileName="src/components/Counter.content.ts" codeFormat="typescript"
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;
```
```tsx fileName="src/components/Counter.tsx" codeFormat="typescript"
import { useIntlayer } from "solid-intlayer";
import { createSignal } from "solid-js";
export default function Counter() {
const [count, setCount] = createSignal(0);
const content = useIntlayer("counter");
return (
);
}
```
`plural()` सक्रिय लोकेल के लिए `Intl.PluralRules` के माध्यम से श्रेणी का चयन करता है, इसलिए दो से अधिक बहुवचन रूपों वाली भाषाएं बिना किसी अतिरिक्त कोड के काम करती हैं।