@intlayer/docs 8.11.3 → 8.12.0

package/blog/hi/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ history:
   title="Demo CodeSandbox - Intlayer का उपयोग करके अपने एप्लिकेशन का अंतरराष्ट्रीयकरण कैसे करें"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > GitHub पर [एप्लिकेशन टेम्पलेट](https://github.com/aymericzip/next-i18next-template) देखें।
 
@@ -116,7 +117,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### चरण 1: Dependencies इंस्टॉल करें
+<Steps>
+
+<Step number={1} title="Dependencies इंस्टॉल करें">
 
 npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: i18next के लिए React बाइंडिंग्स जो क्लाइंट कंपोनेंट्स के लिए `useTranslation` जैसे हुक प्रदान करता है।
 - **i18next-resources-to-backend**: एक प्लगइन जो अनुवाद फ़ाइलों को डायनामिक रूप से लोड करने में सक्षम बनाता है, जिससे आप केवल आवश्यक namespaces को लोड कर सकते हैं।
 
-### चरण 2: अपने प्रोजेक्ट को कॉन्फ़िगर करें
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट को कॉन्फ़िगर करें">
 
 एक कॉन्फ़िगरेशन फ़ाइल बनाएं जिसमें आपके समर्थित लोकल, डिफ़ॉल्ट लोकल, और URL लोकलाइज़ेशन के लिए सहायक फ़ंक्शन परिभाषित हों। यह फ़ाइल आपके i18n सेटअप के लिए एकमात्र सत्य स्रोत के रूप में कार्य करती है और आपके एप्लिकेशन में टाइप सुरक्षा सुनिश्चित करती है।
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### चरण 3: अनुवाद नेमस्पेसेस को केंद्रीकृत करें
+</Step>
+
+<Step number={3} title="अनुवाद नेमस्पेसेस को केंद्रीकृत करें">
 
 अपने एप्लिकेशन द्वारा एक्सपोज़ किए गए प्रत्येक namespace के लिए एक सिंगल सोर्स ऑफ ट्रूथ बनाएं। इस सूची का पुन: उपयोग सर्वर, क्लाइंट, और टूलिंग कोड को सिंक में रखता है और ट्रांसलेशन हेल्पर्स के लिए मजबूत टाइपिंग को अनलॉक करता है।
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### चरण 4: TypeScript के साथ ट्रांसलेशन कीज़ को मजबूत टाइप करें
+</Step>
+
+<Step number={4} title="TypeScript के साथ ट्रांसलेशन कीज़ को मजबूत टाइप करें">
 
 `i18next` को अपने कैनोनिकल भाषा फ़ाइलों (आमतौर पर अंग्रेज़ी) की ओर बढ़ाएं। TypeScript तब प्रत्येक namespace के लिए वैध कीज़ का अनुमान लगाता है, इसलिए `t()` कॉल्स को एंड-टू-एंड चेक किया जाता है।
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### चरण 5: सर्वर-साइड i18n इनिशियलाइज़ेशन सेट करें
+</Step>
+
+<Step number={5} title="सर्वर-साइड i18n इनिशियलाइज़ेशन सेट करें">
 
 सर्वर-साइड i18n इनिशियलाइज़ेशन फ़ंक्शन बनाएं जो सर्वर कंपोनेंट्स के लिए अनुवाद लोड करता है। यह फ़ंक्शन सर्वर-साइड रेंडरिंग के लिए एक अलग i18next इंस्टेंस बनाता है, यह सुनिश्चित करते हुए कि रेंडरिंग से पहले अनुवाद लोड हो जाएं।
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### चरण 6: क्लाइंट-साइड i18n प्रोवाइडर बनाएं
+</Step>
+
+<Step number={6} title="क्लाइंट-साइड i18n प्रोवाइडर बनाएं">
 
 एक क्लाइंट कंपोनेंट प्रोवाइडर बनाएं जो आपके एप्लिकेशन को i18next संदर्भ के साथ लपेटता है। यह प्रोवाइडर सर्वर से पहले से लोड की गई अनुवाद सामग्री प्राप्त करता है ताकि अनुवादित सामग्री के फ्लैश (FOUC) को रोका जा सके और डुप्लिकेट फेचिंग से बचा जा सके।
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### चरण 7: डायनामिक लोकल रूट्स परिभाषित करें
+</Step>
+
+<Step number={7} title="डायनामिक लोकल रूट्स परिभाषित करें">
 
 अपने ऐप फ़ोल्डर में `[locale]` डायरेक्टरी बनाकर लोकल के लिए डायनामिक रूटिंग सेट करें। इससे Next.js लोकल-आधारित रूटिंग को संभाल सकता है जहाँ प्रत्येक लोकल URL सेगमेंट बन जाता है (जैसे, `/en/about`, `/fr/about`)।
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### चरण 8: अपनी अनुवाद फ़ाइलें बनाएं
+</Step>
+
+<Step number={8} title="अपनी अनुवाद फ़ाइलें बनाएं">
 
 प्रत्येक locale और namespace के लिए JSON फ़ाइलें बनाएं। यह संरचना आपको अनुवादों को तार्किक रूप से व्यवस्थित करने और केवल उस पृष्ठ के लिए आवश्यक अनुवाद लोड करने की अनुमति देती है।
 
@@ -481,7 +498,9 @@ export default function LocaleLayout({
 }
 ```
 
-### चरण 9: अपने पृष्ठों में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={9} title="अपने पृष्ठों में अनुवादों का उपयोग करें">
 
 एक पेज कॉम्पोनेंट बनाएं जो सर्वर पर i18next को इनिशियलाइज़ करता है और अनुवादों को सर्वर और क्लाइंट दोनों कॉम्पोनेंट्स को पास करता है। यह सुनिश्चित करता है कि अनुवाद रेंडरिंग से पहले लोड हो जाएं और कंटेंट फ्लैशिंग से बचा जा सके।
 
@@ -541,7 +560,9 @@ export default async function AboutPage({
 }
 ```
 
-### चरण 10: क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें
+</Step>
+
+<Step number={10} title="क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें">
 
 क्लाइंट कंपोनेंट्स अनुवादों तक पहुँचने के लिए `useTranslation` हुक का उपयोग कर सकते हैं। यह हुक अनुवाद फ़ंक्शन और i18n इंस्टेंस तक पहुँच प्रदान करता है, जिससे आप सामग्री का अनुवाद कर सकते हैं और लोकल जानकारी प्राप्त कर सकते हैं।
 
@@ -592,7 +613,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### चरण 11: सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={11} title="सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें">
 
 सर्वर कंपोनेंट्स React hooks का उपयोग नहीं कर सकते हैं, इसलिए वे अपने पैरेंट कंपोनेंट्स से props के माध्यम से अनुवाद प्राप्त करते हैं। यह तरीका सर्वर कंपोनेंट्स को synchronous बनाए रखता है और उन्हें क्लाइंट कंपोनेंट्स के अंदर नेस्ट करने की अनुमति देता है।
 
@@ -638,9 +661,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (वैकल्पिक) चरण 12: अपनी सामग्री की भाषा बदलें
+<Step number={12} title="अपनी सामग्री की भाषा बदलें" isOptional={true}>
 
 Next.js में अपनी सामग्री की भाषा बदलने के लिए, अनुशंसित तरीका है locale-पूर्वसर्ग वाले URL और Next.js लिंक का उपयोग करना। नीचे दिया गया उदाहरण वर्तमान locale को route से पढ़ता है, pathname से इसे हटाता है, और उपलब्ध प्रत्येक locale के लिए एक लिंक रेंडर करता है।
 
@@ -712,7 +735,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (वैकल्पिक) चरण 13: एक स्थानीयकृत Link कॉम्पोनेंट बनाएं
+</Step>
+
+<Step number={13} title="एक स्थानीयकृत Link कॉम्पोनेंट बनाएं" isOptional={true}>
 
 अपने ऐप में स्थानीयकृत URLs का पुन: उपयोग नेविगेशन को सुसंगत और SEO-अनुकूल बनाए रखता है। `next/link` को एक छोटे हेल्पर में लपेटें जो आंतरिक रूट्स के सामने सक्रिय locale जोड़ता है जबकि बाहरी URLs को अपरिवर्तित छोड़ता है।
 
@@ -763,7 +788,9 @@ export default function LocalizedLink({
 
 > सुझाव: क्योंकि `LocalizedLink` एक ड्रॉप-इन रिप्लेसमेंट है, इसलिए आयातों को धीरे-धीरे बदलकर और कंपोनेंट को locale-विशिष्ट URLs संभालने दें, क्रमिक रूप से माइग्रेट करें।
 
-### (वैकल्पिक) चरण 14: सर्वर एक्शन्स के अंदर सक्रिय locale तक पहुँचें
+</Step>
+
+<Step number={14} title="सर्वर एक्शन्स के अंदर सक्रिय locale तक पहुँचें" isOptional={true}>
 
 सर्वर एक्शन्स को अक्सर ईमेल, लॉगिंग, या थर्ड-पार्टी इंटीग्रेशन के लिए वर्तमान locale की आवश्यकता होती है। अपने प्रॉक्सी द्वारा सेट किए गए locale कुकी को `Accept-Language` हेडर के साथ एक फॉलबैक के रूप में संयोजित करें।
 
@@ -801,7 +828,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > क्योंकि यह हेल्पर Next.js कुकीज़ और हेडर्स पर निर्भर करता है, यह Route Handlers, Server Actions, और अन्य केवल सर्वर-संदर्भों में काम करता है।
 
-### (वैकल्पिक) चरण 15: अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें
+</Step>
+
+<Step number={15} title="अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें" isOptional={true}>
 
 सामग्री का अनुवाद करना महत्वपूर्ण है, लेकिन अंतरराष्ट्रीयकरण का मुख्य उद्देश्य आपकी वेबसाइट को दुनिया के लिए अधिक दृश्यनीय बनाना है। I18n आपकी वेबसाइट की दृश्यता को उचित SEO के माध्यम से बढ़ाने के लिए एक अद्भुत साधन है।
 
@@ -868,7 +897,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (वैकल्पिक) चरण 16: अपने साइटमैप को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={16} title="अपने साइटमैप को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 एक साइटमैप बनाएं जिसमें आपके पृष्ठों के सभी लोकल संस्करण शामिल हों। यह सर्च इंजन को आपकी सामग्री के सभी भाषा संस्करणों को खोजने और इंडेक्स करने में मदद करता है।
 
@@ -924,7 +955,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (वैकल्पिक) चरण 17: अपने robots.txt को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={17} title="अपने robots.txt को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 अपने संरक्षित रूट्स के सभी लोकल संस्करणों को सही ढंग से संभालने के लिए एक robots.txt फ़ाइल बनाएं। यह सुनिश्चित करता है कि सर्च इंजन किसी भी भाषा में एडमिन या डैशबोर्ड पेजों को इंडेक्स न करें।
 
@@ -955,7 +988,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (वैकल्पिक) चरण 18: लोकल रूटिंग के लिए मिडलवेयर सेट करें
+</Step>
+
+<Step number={18} title="लोकल रूटिंग के लिए मिडलवेयर सेट करें" isOptional={true}>
 
 एक प्रॉक्सी बनाएं जो स्वचालित रूप से उपयोगकर्ता की पसंदीदा भाषा का पता लगाए और उन्हें उपयुक्त लोकल-प्रिफिक्स्ड URL पर पुनः निर्देशित करे। यह उपयोगकर्ता अनुभव को बेहतर बनाता है क्योंकि सामग्री उनकी पसंदीदा भाषा में दिखाई जाती है।
 
@@ -1044,7 +1079,9 @@ export const config = {
 };
 ```
 
-### (वैकल्पिक) चरण 19: Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें
+</Step>
+
+<Step number={19} title="Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें" isOptional={true}>
 
 Intlayer एक **मुफ्त** और **ओपन-सोर्स** लाइब्रेरी है जो आपके एप्लिकेशन में स्थानीयकरण प्रक्रिया में सहायता करने के लिए डिज़ाइन की गई है। जबकि i18next अनुवाद लोडिंग और प्रबंधन को संभालता है, Intlayer अनुवाद कार्यप्रवाह को स्वचालित करने में मदद करता है।
 
@@ -1074,3 +1111,7 @@ Intlayer आपको निम्नलिखित सुविधाएँ
   Intlayer एक मुफ्त विज़ुअल एडिटर प्रदान करता है जिससे आप अपनी सामग्री को विज़ुअल एडिटर का उपयोग करके संपादित कर सकते हैं। [अपने अनुवादों का विज़ुअल संपादन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) के बारे में अधिक जानें।
 
 और भी बहुत कुछ। Intlayer द्वारा प्रदान की गई सभी विशेषताओं को खोजने के लिए, कृपया [Intlayer के महत्व की दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/interest_of_intlayer.md) देखें।
+
+</Step>
+
+</Steps>

package/blog/hi/i18n_using_next-intl.md

@@ -108,7 +108,9 @@ history:
         └── ServerComponent.tsx
 ```
 
-### चरण 1: निर्भरताएँ स्थापित करें
+<Steps>
+
+<Step number={1} title="निर्भरताएँ स्थापित करें">
 
 npm का उपयोग करके आवश्यक पैकेज स्थापित करें:
 
@@ -126,7 +128,9 @@ yarn add next-intl
 
 - **next-intl**: Next.js App Router के लिए मुख्य अंतरराष्ट्रीयकरण लाइब्रेरी जो अनुवादों के प्रबंधन के लिए hooks, सर्वर फ़ंक्शन, और क्लाइंट प्रदाता प्रदान करती है।
 
-### चरण 2: अपने प्रोजेक्ट को कॉन्फ़िगर करें
+</Step>
+
+<Step number={2} title="अपने प्रोजेक्ट को कॉन्फ़िगर करें">
 
 अपने समर्थित लोकल्स को परिभाषित करने और next-intl के अनुरोध कॉन्फ़िगरेशन को सेट अप करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएं। यह फ़ाइल आपके i18n सेटअप के लिए सत्य का एकमात्र स्रोत के रूप में कार्य करती है और आपके एप्लिकेशन में टाइप सुरक्षा सुनिश्चित करती है।
 
@@ -210,7 +214,9 @@ export const { Link, redirect, usePathname, useRouter, getPathname } =
 export const proxy = createMiddleware(routingOptions);
 ```
 
-### चरण 3: डायनामिक लोकल रूट्स परिभाषित करें
+</Step>
+
+<Step number={3} title="डायनामिक लोकल रूट्स परिभाषित करें">
 
 अपने ऐप फ़ोल्डर में `[locale]` डायरेक्टरी बनाकर स्थानीयताओं के लिए डायनेमिक रूटिंग सेट करें। इससे Next.js स्थानीय-आधारित रूटिंग को संभाल सकता है जहाँ प्रत्येक स्थानीयता URL सेगमेंट बन जाती है (जैसे, `/en/about`, `/fr/about`)।
 
@@ -298,7 +304,9 @@ export default async function AboutPage({
 }
 ```
 
-### चरण 4: अपने अनुवाद फ़ाइलें बनाएं
+</Step>
+
+<Step number={4} title="अपने अनुवाद फ़ाइलें बनाएं">
 
 प्रत्येक locale और namespace के लिए JSON फ़ाइलें बनाएं। यह संरचना आपको अनुवादों को तार्किक रूप से व्यवस्थित करने और प्रत्येक पेज के लिए केवल आवश्यक अनुवाद लोड करने की अनुमति देती है।
 
@@ -340,7 +348,9 @@ namespace के अनुसार अनुवादों को व्यव
 }
 ```
 
-### चरण 5: अपने पृष्ठों में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={5} title="अपने पृष्ठों में अनुवादों का उपयोग करें">
 
 एक पेज कंपोनेंट बनाएं जो सर्वर पर अनुवाद लोड करता है और उन्हें सर्वर और क्लाइंट दोनों कंपोनेंट्स को पास करता है। यह सुनिश्चित करता है कि अनुवाद रेंडरिंग से पहले लोड हो जाएं और कंटेंट फ्लैशिंग को रोका जा सके।
 
@@ -391,7 +401,9 @@ export default async function AboutPage({
 }
 ```
 
-### चरण 6: क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें
+</Step>
+
+<Step number={6} title="क्लाइंट कंपोनेंट्स में अनुवाद का उपयोग करें">
 
 क्लाइंट कंपोनेंट्स `useTranslations` और `useFormatter` hooks का उपयोग करके अनुवाद और फॉर्मेटिंग फ़ंक्शंस तक पहुँच सकते हैं। ये hooks `NextIntlClientProvider` context से पढ़ते हैं।
 
@@ -427,7 +439,9 @@ const ClientComponent = () => {
 };
 ```
 
-### चरण 7: सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें
+</Step>
+
+<Step number={7} title="सर्वर कंपोनेंट्स में अनुवादों का उपयोग करें">
 
 सर्वर कंपोनेंट्स React hooks का उपयोग नहीं कर सकते, इसलिए वे अपने पैरेंट कंपोनेंट्स से props के माध्यम से अनुवाद और फॉर्मैटर प्राप्त करते हैं। यह तरीका सर्वर कंपोनेंट्स को synchronous रखता है और उन्हें क्लाइंट कंपोनेंट्स के अंदर नेस्ट करने की अनुमति देता है।
 
@@ -459,9 +473,9 @@ const ServerComponent = ({
 
 > अपने पेज/लेआउट में, `next-intl/server` से `getTranslations` और `getFormatter` का उपयोग करें ताकि अनुवाद और फॉर्मेटिंग को पहले से गणना किया जा सके, फिर उन्हें props के रूप में सर्वर कंपोनेंट्स को पास करें।
 
----
+</Step>
 
-### (वैकल्पिक) चरण 8: अपनी सामग्री की भाषा बदलें
+<Step number={8} title="अपनी सामग्री की भाषा बदलें" isOptional={true}>
 
 next-intl के साथ अपनी सामग्री की भाषा बदलने के लिए, ऐसे locale-aware लिंक रेंडर करें जो locale बदलते समय उसी pathname की ओर इशारा करें। प्रदाता URLs को स्वचालित रूप से पुनर्लेखित करता है, इसलिए आपको केवल वर्तमान रूट को लक्षित करना होता है।
 
@@ -533,7 +547,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (वैकल्पिक) चरण 9: स्थानीयकृत Link कॉम्पोनेंट का उपयोग करें
+</Step>
+
+<Step number={9} title="स्थानीयकृत Link कॉम्पोनेंट का उपयोग करें" isOptional={true}>
 
 `next-intl` एक उप-पैकेज `next-intl/navigation` प्रदान करता है जिसमें एक स्थानीयकृत लिंक कॉम्पोनेंट होता है जो स्वचालित रूप से सक्रिय locale लागू करता है। हमने इसे आपके लिए `@/i18n` फ़ाइल में पहले ही निकाला है, इसलिए आप इसे इस प्रकार उपयोग कर सकते हैं:
 
@@ -543,7 +559,9 @@ import { Link } from "@/i18n";
 return <Link href="/about">t("about.title")</Link>;
 ```
 
-### (वैकल्पिक) चरण 10: Server Actions के अंदर सक्रिय locale तक पहुँचें
+</Step>
+
+<Step number={10} title="Server Actions के अंदर सक्रिय locale तक पहुँचें" isOptional={true}>
 
 Server Actions वर्तमान locale को `next-intl/server` का उपयोग करके पढ़ सकते हैं। यह स्थानीयकृत ईमेल भेजने या सबमिट किए गए डेटा के साथ भाषा प्राथमिकताएँ संग्रहीत करने के लिए उपयोगी है।
 
@@ -566,7 +584,9 @@ export async function handleContactForm(formData: FormData) {
 
 > `getLocale` उस locale को पढ़ता है जो `next-intl` प्रॉक्सी द्वारा सेट किया गया है, इसलिए यह सर्वर पर कहीं भी काम करता है: Route Handlers, Server Actions, और edge functions।
 
-### (वैकल्पिक) चरण 11: अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें
+</Step>
+
+<Step number={11} title="अपने मेटाडेटा का अंतरराष्ट्रीयकरण करें" isOptional={true}>
 
 सामग्री का अनुवाद करना महत्वपूर्ण है, लेकिन अंतरराष्ट्रीयकरण का मुख्य उद्देश्य आपकी वेबसाइट को दुनिया के लिए अधिक दृश्य बनाना है। I18n आपकी वेबसाइट की दृश्यता को उचित SEO के माध्यम से सुधारने के लिए एक अद्भुत उपकरण है।
 
@@ -605,7 +625,9 @@ export async function generateMetadata({
 // ... पेज कोड का बाकी हिस्सा
 ```
 
-### (वैकल्पिक) चरण 12: अपने साइटमैप को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={12} title="अपने साइटमैप को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 अपने पृष्ठों के सभी स्थानीय संस्करणों को शामिल करने वाला एक साइटमैप जनरेट करें। यह खोज इंजन को आपकी सामग्री के सभी भाषा संस्करणों को खोजने और अनुक्रमित करने में मदद करता है।
 
@@ -659,7 +681,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (वैकल्पिक) चरण 13: अपने robots.txt को अंतरराष्ट्रीयकृत करें
+</Step>
+
+<Step number={13} title="अपने robots.txt को अंतरराष्ट्रीयकृत करें" isOptional={true}>
 
 एक robots.txt फ़ाइल बनाएं जो आपके सभी स्थानीय संस्करणों वाले संरक्षित रूट्स को सही ढंग से संभाले। यह सुनिश्चित करता है कि सर्च इंजन किसी भी भाषा में एडमिन या डैशबोर्ड पेजों को इंडेक्स न करें।
 
@@ -692,7 +716,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (वैकल्पिक) चरण 14: लोकल रूटिंग के लिए प्रॉक्सी सेट करें
+</Step>
+
+<Step number={14} title="लोकल रूटिंग के लिए प्रॉक्सी सेट करें" isOptional={true}>
 
 एक प्रॉक्सी बनाएं जो स्वचालित रूप से उपयोगकर्ता की पसंदीदा भाषा (locale) का पता लगाए और उन्हें उपयुक्त लोकल-प्रिफिक्स्ड URL पर पुनः निर्देशित करे। next-intl एक सुविधाजनक प्रॉक्सी फ़ंक्शन प्रदान करता है जो इसे स्वचालित रूप से संभालता है।
 
@@ -712,7 +738,9 @@ export const config = {
 };
 ```
 
-### (वैकल्पिक) चरण 15: लोकल के लिए TypeScript टाइप्स सेट करें
+</Step>
+
+<Step number={15} title="लोकल के लिए TypeScript टाइप्स सेट करें" isOptional={true}>
 
 TypeScript सेटअप करने से आपको अपने कीज़ के लिए ऑटो-कम्प्लीशन और टाइप सुरक्षा प्राप्त करने में मदद मिलेगी।
 
@@ -738,7 +766,9 @@ declare module "next-intl" {
 
 यह कोड Module Augmentation का उपयोग करेगा ताकि locales और messages को next-intl के AppConfig टाइप में जोड़ा जा सके।
 
-### (वैकल्पिक) चरण 15: Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें
+</Step>
+
+<Step number={16} title="Intlayer का उपयोग करके अपने अनुवादों को स्वचालित करें" isOptional={true}>
 
 Intlayer एक **मुफ़्त** और **ओपन-सोर्स** लाइब्रेरी है जिसे आपके एप्लिकेशन में लोकलाइज़ेशन प्रक्रिया में सहायता करने के लिए डिज़ाइन किया गया है। जबकि next-intl अनुवाद लोडिंग और प्रबंधन को संभालता है, Intlayer अनुवाद वर्कफ़्लो को स्वचालित करने में मदद करता है।
 
@@ -763,3 +793,7 @@ Intlayer आपको निम्नलिखित की अनुमति
   Intlayer एक मुफ्त विज़ुअल एडिटर प्रदान करता है जिससे आप अपने कंटेंट को विज़ुअल एडिटर का उपयोग करके संपादित कर सकते हैं। अधिक जानने के लिए [अपने अनुवादों का विज़ुअल संपादन](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/intlayer_visual_editor.md) देखें।
 
 और भी बहुत कुछ। Intlayer द्वारा प्रदान की गई सभी विशेषताओं को खोजने के लिए, कृपया [Intlayer के महत्व की दस्तावेज़ीकरण](https://github.com/aymericzip/intlayer/blob/main/docs/docs/hi/interest_of_intlayer.md) देखें।
+
+</Step>
+
+</Steps>

package/blog/id/i18n_using_next-i18next.md

@@ -80,6 +80,7 @@ Sebelum kita masuk ke implementasi, berikut beberapa praktik yang harus Anda iku
   title="Demo CodeSandbox - Cara Menginternasionalisasi aplikasi Anda menggunakan Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
+/>
 
 > Lihat [Application Template](https://github.com/aymericzip/next-i18next-template) di GitHub.
 
@@ -116,7 +117,9 @@ Berikut adalah struktur proyek yang akan kita buat:
         └── ServerComponent.tsx
 ```
 
-### Langkah 1: Instalasi Dependensi
+<Steps>
+
+<Step number={1} title="Instalasi Dependensi">
 
 Instal paket-paket yang diperlukan menggunakan npm:
 
@@ -136,7 +139,9 @@ yarn add i18next react-i18next i18next-resources-to-backend
 - **react-i18next**: Binding React untuk i18next yang menyediakan hooks seperti `useTranslation` untuk komponen klien.
 - **i18next-resources-to-backend**: Plugin yang memungkinkan pemuatan dinamis file terjemahan, sehingga Anda hanya memuat namespace yang Anda butuhkan.
 
-### Langkah 2: Konfigurasikan Proyek Anda
+</Step>
+
+<Step number={2} title="Konfigurasikan Proyek Anda">
 
 Buat file konfigurasi untuk mendefinisikan locale yang didukung, locale default, dan fungsi pembantu untuk lokalisasi URL. File ini berfungsi sebagai sumber kebenaran tunggal untuk pengaturan i18n Anda dan memastikan keamanan tipe di seluruh aplikasi Anda.
 
@@ -189,7 +194,9 @@ export function getCookie(locale: Locale) {
 }
 ```
 
-### Langkah 3: Sentralisasi Namespace Terjemahan
+</Step>
+
+<Step number={3} title="Sentralisasi Namespace Terjemahan">
 
 Buat satu sumber kebenaran untuk setiap namespace yang diekspos oleh aplikasi Anda. Menggunakan kembali daftar ini menjaga sinkronisasi kode server, klien, dan tooling serta membuka tipe kuat untuk helper terjemahan.
 
@@ -199,7 +206,9 @@ export const namespaces = ["common", "about"] as const;
 export type Namespace = (typeof namespaces)[number];
 ```
 
-### Langkah 4: Ketik Kuat Kunci Terjemahan dengan TypeScript
+</Step>
+
+<Step number={4} title="Ketik Kuat Kunci Terjemahan dengan TypeScript">
 
 Perluas `i18next` untuk menunjuk ke file bahasa kanonik Anda (biasanya bahasa Inggris). TypeScript kemudian menafsirkan kunci yang valid per namespace, sehingga panggilan ke `t()` diperiksa secara menyeluruh.
 
@@ -237,7 +246,9 @@ const { t } = useTranslation("about");
 export type AboutTranslator = TFunction<"about">;
 ```
 
-### Langkah 5: Siapkan Inisialisasi i18n di Sisi Server
+</Step>
+
+<Step number={5} title="Siapkan Inisialisasi i18n di Sisi Server">
 
 Buat fungsi inisialisasi sisi server yang memuat terjemahan untuk komponen server. Fungsi ini membuat instance i18next terpisah untuk rendering sisi server, memastikan bahwa terjemahan dimuat sebelum rendering.
 
@@ -292,7 +303,9 @@ export async function initI18next(
 }
 ```
 
-### Langkah 6: Buat Provider i18n di Sisi Klien
+</Step>
+
+<Step number={6} title="Buat Provider i18n di Sisi Klien">
 
 Buat provider komponen klien yang membungkus aplikasi Anda dengan konteks i18next. Provider ini menerima terjemahan yang sudah dimuat sebelumnya dari server untuk mencegah flash konten yang belum diterjemahkan (FOUC) dan menghindari pengambilan data ganda.
 
@@ -375,7 +388,9 @@ export default function I18nProvider({
 }
 ```
 
-### Langkah 7: Definisikan Rute Locale Dinamis
+</Step>
+
+<Step number={7} title="Definisikan Rute Locale Dinamis">
 
 Atur routing dinamis untuk locale dengan membuat direktori `[locale]` di folder app Anda. Ini memungkinkan Next.js untuk menangani routing berbasis locale di mana setiap locale menjadi segmen URL (misalnya, `/en/about`, `/fr/about`).
 
@@ -427,7 +442,9 @@ export default function LocaleLayout({
 }
 ```
 
-### Langkah 8: Buat File Terjemahan Anda
+</Step>
+
+<Step number={8} title="Buat File Terjemahan Anda">
 
 Buat file JSON untuk setiap locale dan namespace. Struktur ini memungkinkan Anda mengatur terjemahan secara logis dan memuat hanya yang Anda butuhkan untuk setiap halaman.
 
@@ -493,7 +510,9 @@ Mengorganisir terjemahan berdasarkan namespace (misalnya, `common.json`, `about.
 }
 ```
 
-### Langkah 9: Memanfaatkan Terjemahan di Halaman Anda
+</Step>
+
+<Step number={9} title="Memanfaatkan Terjemahan di Halaman Anda">
 
 Buat komponen halaman yang menginisialisasi i18next di server dan meneruskan terjemahan ke komponen server dan klien. Ini memastikan bahwa terjemahan dimuat sebelum rendering dan mencegah tampilan konten yang berkedip.
 
@@ -553,7 +572,9 @@ export default async function AboutPage({
 }
 ```
 
-### Langkah 10: Gunakan Terjemahan di Komponen Klien
+</Step>
+
+<Step number={10} title="Gunakan Terjemahan di Komponen Klien">
 
 Komponen klien dapat menggunakan hook `useTranslation` untuk mengakses terjemahan. Hook ini memberikan akses ke fungsi terjemahan dan instance i18n, memungkinkan Anda menerjemahkan konten dan mengakses informasi locale.
 
@@ -604,7 +625,9 @@ const ClientComponent = () => {
 export default ClientComponent;
 ```
 
-### Langkah 11: Menggunakan Terjemahan di Komponen Server
+</Step>
+
+<Step number={11} title="Menggunakan Terjemahan di Komponen Server">
 
 Komponen server tidak dapat menggunakan React hooks, sehingga mereka menerima terjemahan melalui props dari komponen induk mereka. Pendekatan ini menjaga komponen server tetap sinkron dan memungkinkan mereka untuk disisipkan di dalam komponen klien.
 
@@ -650,9 +673,9 @@ const ServerComponent = ({ t, locale, count }: ServerComponentProps) => {
 export default ServerComponent;
 ```
 
----
+</Step>
 
-### (Opsional) Langkah 12: Ubah bahasa konten Anda
+<Step number={12} title="Ubah bahasa konten Anda" isOptional={true}>
 
 Untuk mengubah bahasa konten Anda di Next.js, cara yang direkomendasikan adalah menggunakan URL dengan prefix locale dan link Next.js. Contoh di bawah ini membaca locale saat ini dari rute, menghapusnya dari pathname, dan menampilkan satu link untuk setiap locale yang tersedia.
 
@@ -724,7 +747,9 @@ export default function LocaleSwitcher() {
 }
 ```
 
-### (Opsional) Langkah 13: Bangun komponen Link yang dilokalkan
+</Step>
+
+<Step number={13} title="Bangun komponen Link yang dilokalkan" isOptional={true}>
 
 Menggunakan kembali URL yang dilokalkan di seluruh aplikasi Anda menjaga navigasi tetap konsisten dan ramah SEO. Bungkus `next/link` dalam helper kecil yang menambahkan prefix locale aktif pada rute internal sambil membiarkan URL eksternal tidak berubah.
 
@@ -775,7 +800,9 @@ export default function LocalizedLink({
 
 > Tip: Karena `LocalizedLink` adalah pengganti langsung, migrasikan secara bertahap dengan menukar impor dan membiarkan komponen menangani URL spesifik locale.
 
-### (Opsional) Langkah 14: Akses locale aktif di dalam Server Actions
+</Step>
+
+<Step number={14} title="Akses locale aktif di dalam Server Actions" isOptional={true}>
 
 Server Actions sering membutuhkan locale saat ini untuk email, pencatatan, atau integrasi pihak ketiga. Gabungkan cookie locale yang diatur oleh proxy Anda dengan header `Accept-Language` sebagai cadangan.
 
@@ -813,7 +840,9 @@ export async function stuffFromServer(formData: FormData) {
 
 > Karena helper ini bergantung pada cookies dan headers Next.js, ia bekerja di Route Handlers, Server Actions, dan konteks server-only lainnya.
 
-### (Opsional) Langkah 15: Internasionalisasi Metadata Anda
+</Step>
+
+<Step number={15} title="Internasionalisasi Metadata Anda" isOptional={true}>
 
 Menerjemahkan konten itu penting, tetapi tujuan utama internasionalisasi adalah membuat situs web Anda lebih terlihat oleh dunia. I18n adalah tuas luar biasa untuk meningkatkan visibilitas situs web Anda melalui SEO yang tepat.
 
@@ -880,7 +909,9 @@ export default async function AboutPage() {
 }
 ```
 
-### (Opsional) Langkah 16: Internasionalisasi Sitemap Anda
+</Step>
+
+<Step number={16} title="Internasionalisasi Sitemap Anda" isOptional={true}>
 
 Buat sitemap yang mencakup semua versi locale dari halaman Anda. Ini membantu mesin pencari menemukan dan mengindeks semua versi bahasa dari konten Anda.
 
@@ -934,7 +965,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
 }
 ```
 
-### (Opsional) Langkah 17: Internasionalisasi robots.txt Anda
+</Step>
+
+<Step number={17} title="Internasionalisasi robots.txt Anda" isOptional={true}>
 
 Buat file robots.txt yang menangani semua versi locale dari rute yang dilindungi dengan benar. Ini memastikan bahwa mesin pencari tidak mengindeks halaman admin atau dashboard dalam bahasa apa pun.
 
@@ -965,7 +998,9 @@ export default function robots(): MetadataRoute.Robots {
 }
 ```
 
-### (Opsional) Langkah 18: Siapkan Middleware untuk Routing Locale
+</Step>
+
+<Step number={18} title="Siapkan Middleware untuk Routing Locale" isOptional={true}>
 
 Buat proxy untuk secara otomatis mendeteksi locale yang dipilih pengguna dan mengarahkan mereka ke URL dengan prefix locale yang sesuai. Ini meningkatkan pengalaman pengguna dengan menampilkan konten dalam bahasa pilihan mereka.
 
@@ -1054,7 +1089,9 @@ export const config = {
 };
 ```
 
-### (Opsional) Langkah 19: Otomatiskan Terjemahan Anda Menggunakan Intlayer
+</Step>
+
+<Step number={19} title="Otomatiskan Terjemahan Anda Menggunakan Intlayer" isOptional={true}>
 
 Intlayer adalah perpustakaan **gratis** dan **open-source** yang dirancang untuk membantu proses lokalisasi dalam aplikasi Anda. Sementara i18next menangani pemuatan dan pengelolaan terjemahan, Intlayer membantu mengotomatisasi alur kerja terjemahan.
 
@@ -1084,3 +1121,7 @@ Intlayer memungkinkan Anda untuk:
   Intlayer menawarkan editor visual gratis untuk mengedit konten Anda menggunakan editor visual. Pelajari lebih lanjut tentang [pengeditan visual terjemahan Anda](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md).
 
 Dan masih banyak lagi. Untuk menemukan semua fitur yang disediakan oleh Intlayer, silakan merujuk ke [Dokumentasi Manfaat Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/interest_of_intlayer.md).
+
+</Step>
+
+</Steps>