इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।

अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखें

Getting Started internationalizing (i18n) with Intlayer and Next.js 15 App Router

Intlayer के साथ शुरुआत करें

Intlayer एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है। Intlayer नवीनतम Next.js 15 फ्रेमवर्क के साथ सहजता से एकीकृत होता है, जिसमें इसका शक्तिशाली App Router शामिल है। यह Server Components के साथ कुशल रेंडरिंग के लिए अनुकूलित है और Turbopack के साथ पूरी तरह से संगत है।

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

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

Intlayer Next.js 12, 13, 14, और 15 के साथ संगत है। यदि आप Next.js Page Router का उपयोग कर रहे हैं, तो आप इस गाइड को देख सकते हैं। Next.js 12, 13, 14 के लिए App Router के साथ, इस गाइड को देखें।

Next.js एप्लिकेशन में Intlayer सेट अप करने के लिए चरण-दर-चरण गाइड

चरण 1: डिपेंडेंसी इंस्टॉल करें

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

bash

npm install intlayer next-intlayer

intlayer
यह मुख्य पैकेज है जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपिलेशन, और CLI कमांड्स के लिए अंतर्राष्ट्रीयकरण उपकरण प्रदान करता है।
next-intlayer
यह पैकेज Intlayer को Next.js के साथ एकीकृत करता है। यह Next.js अंतर्राष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक प्रदान करता है। इसके अतिरिक्त, यह Intlayer को Webpack या Turbopack के साथ एकीकृत करने के लिए Next.js प्लगइन और उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने, कुकीज़ प्रबंधन, और URL रीडायरेक्शन को संभालने के लिए मिडलवेयर शामिल करता है।

चरण 2: अपने प्रोजेक्ट को कॉन्फ़िगर करें

अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फ़ाइल बनाएं:

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;

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

चरण 3: अपने Next.js कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

Intlayer का उपयोग करने के लिए अपने Next.js सेटअप को कॉन्फ़िगर करें:

typescript

import type { NextConfig } from "next";import { withIntlayer } from "next-intlayer/server";const nextConfig: NextConfig = {  /* यहाँ कॉन्फ़िग विकल्प */};export default withIntlayer(nextConfig);

withIntlayer() Next.js प्लगइन का उपयोग Intlayer को Next.js के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Webpack या Turbopack वातावरणों के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है और सर्वर घटकों के साथ संगतता सुनिश्चित करता है।

चरण 4: डायनामिक लोकेल रूट्स को परिभाषित करें

RootLayout से सब कुछ हटा दें और निम्नलिखित कोड से बदलें:

src/app/layout.tsx

import type { PropsWithChildren, FC } from "react";import "./globals.css";const RootLayout: FC<PropsWithChildren> = ({ children }) => children;export default RootLayout;

RootLayout घटक को खाली रखना <html> टैग में lang और dir विशेषताओं को सेट करने की अनुमति देता है।

डायनामिक रूटिंग को लागू करने के लिए, अपने [locale] डायरेक्टरी में एक नया लेआउट जोड़कर लोकेल के लिए पथ प्रदान करें:

src/app/[locale]/layout.tsx

import type { NextLayoutIntlayer } from "next-intlayer";import { Inter } from "next/font/google";import { getHTMLTextDir } from "intlayer";const inter = Inter({ subsets: ["latin"] });const LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  const { locale } = await params;  return (    <html lang={locale} dir={getHTMLTextDir(locale)}>      <body className={inter.className}>{children}</body>    </html>  );};export default LocaleLayout;

[locale] पथ खंड का उपयोग लोकेल को परिभाषित करने के लिए किया जाता है। उदाहरण: /en-US/about en-US को संदर्भित करेगा और /fr/about fr को।

इस चरण में, आपको त्रुटि का सामना करना पड़ेगा: Error: Missing <html> and <body> tags in the root layout.। यह अपेक्षित है क्योंकि /app/page.tsx फ़ाइल अब उपयोग में नहीं है और इसे हटाया जा सकता है। इसके बजाय, [locale] पथ खंड /app/[locale]/page.tsx पृष्ठ को सक्रिय करेगा। परिणामस्वरूप, पृष्ठ आपके ब्राउज़र में /en, /fr, /es जैसे पथों के माध्यम से सुलभ होंगे। डिफ़ॉल्ट लोकेल को रूट पृष्ठ के रूप में सेट करने के लिए, चरण 7 में middleware सेटअप देखें।

इसके बाद, अपने एप्लिकेशन लेआउट में generateStaticParams फ़ंक्शन को लागू करें।

src/app/[locale]/layout.tsx

export { generateStaticParams } from "next-intlayer"; // डालने के लिए पंक्तिconst LocaleLayout: NextLayoutIntlayer = async ({ children, params }) => {  /*... बाकी कोड*/};export default LocaleLayout;

generateStaticParams यह सुनिश्चित करता है कि आपका एप्लिकेशन सभी लोकेल्स के लिए आवश्यक पृष्ठों को पहले से बना लेता है, रनटाइम गणना को कम करता है और उपयोगकर्ता अनुभव को बेहतर बनाता है। अधिक विवरण के लिए, Next.js दस्तावेज़ पर generateStaticParams देखें।

चरण 5: अपनी सामग्री घोषित करें

अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाओं को बनाएं और प्रबंधित करें:

src/app/[locale]/page.content.ts

import { t, type Dictionary } from "intlayer";const pageContent = {  key: "page",  content: {    getStarted: {      main: t({        en: "Get started by editing",        fr: "Commencez par éditer",        es: "Comience por editar",        hi: "संपादन करके शुरू करें",      }),      pageLink: "src/app/page.tsx",    },  },} satisfies Dictionary;export default pageContent;

आपकी सामग्री घोषणाओं को आपके एप्लिकेशन में कहीं भी परिभाषित किया जा सकता है जब तक कि वे contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./src) में शामिल हैं। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाते हैं (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx})।

अधिक विवरण के लिए, सामग्री घोषणा दस्तावेज़ देखें।

चरण 6: अपनी कोड में सामग्री का उपयोग करें

अपने एप्लिकेशन में अपनी सामग्री शब्दकोशों तक पहुंचें:

src/app/[locale]/page.tsx

import type { FC } from "react";import { ClientComponentExample } from "@components/ClientComponentExample";import { ServerComponentExample } from "@components/ServerComponentExample";import { type NextPageIntlayer, IntlayerClientProvider } from "next-intlayer";import { IntlayerServerProvider, useIntlayer } from "next-intlayer/server";const PageContent: FC = () => {  const content = useIntlayer("page");  return (    <>      <p>{content.getStarted.main}</p>      <code>{content.getStarted.pageLink}</code>    </>  );};const Page: NextPageIntlayer = async ({ params }) => {  const { locale } = await params;  return (    <IntlayerServerProvider locale={locale}>      <PageContent />      <ServerComponentExample />      <IntlayerClientProvider locale={locale}>        <ClientComponentExample />      </IntlayerClientProvider>    </IntlayerServerProvider>  );};export default Page;

IntlayerClientProvider का उपयोग क्लाइंट-साइड घटकों को लोकेल प्रदान करने के लिए किया जाता है। इसे किसी भी पैरेंट घटक में रखा जा सकता है, जिसमें लेआउट भी शामिल है। हालांकि, इसे लेआउट में रखना अनुशंसित है क्योंकि Next.js पृष्ठों में लेआउट कोड साझा करता है, जिससे यह अधिक कुशल हो जाता है। लेआउट में IntlayerClientProvider का उपयोग करके, आप इसे हर पृष्ठ के लिए पुनः आरंभ करने से बचते हैं, प्रदर्शन में सुधार करते हैं और अपने एप्लिकेशन में एक सुसंगत स्थानीयकरण संदर्भ बनाए रखते हैं।
IntlayerServerProvider का उपयोग सर्वर बच्चों को लोकेल प्रदान करने के लिए किया जाता है। इसे लेआउट में सेट नहीं किया जा सकता है।
लेआउट और पृष्ठ एक सामान्य सर्वर संदर्भ साझा नहीं कर सकते क्योंकि सर्वर संदर्भ प्रणाली प्रति-रिक्वेस्ट डेटा स्टोर (के माध्यम से React’s cache तंत्र) पर आधारित है, जिससे एप्लिकेशन के विभिन्न खंडों के लिए प्रत्येक "संदर्भ" को पुनः बनाया जाता है। साझा लेआउट में प्रदाता को रखने से यह पृथक्करण टूट जाएगा, जिससे आपके सर्वर घटकों को सर्वर संदर्भ मानों का सही प्रचार रोक दिया जाएगा।

src/components/ClientComponentExample.tsx

"use client";import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ClientComponentExample: FC = () => {  const content = useIntlayer("client-component-example"); // संबंधित सामग्री घोषणा बनाएँ  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

src/components/ServerComponentExample.tsx

import type { FC } from "react";import { useIntlayer } from "next-intlayer/server";export const ServerComponentExample: FC = () => {  const content = useIntlayer("server-component-example"); // संबंधित सामग्री घोषणा बनाएँ  return (    <div>      <h2>{content.title}</h2>      <p>{content.content}</p>    </div>  );};

यदि आप अपनी सामग्री का उपयोग किसी string विशेषता में करना चाहते हैं, जैसे कि alt, title, href, aria-label, आदि, तो आपको फ़ंक्शन के मान को कॉल करना होगा, जैसे:

jsx

<img src={content.image.src.value} alt={content.image.value} />

useIntlayer हुक के बारे में अधिक जानने के लिए, दस्तावेज़ देखें।

(वैकल्पिक) चरण 7: लोकेल डिटेक्शन के लिए मिडलवेयर कॉन्फ़िगर करें

उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने के लिए मिडलवेयर सेट करें:

src/middleware.ts

export { intlayerMiddleware as middleware } from "next-intlayer/middleware";export const config = {  matcher:    "/((?!api|static|assets|robots|sitemap|sw|service-worker|manifest|.*\\..*|_next).*)",};

intlayerMiddleware का उपयोग उपयोगकर्ता की पसंदीदा लोकेल का पता लगाने और उन्हें कॉन्फ़िगरेशन में निर्दिष्ट उपयुक्त URL पर रीडायरेक्ट करने के लिए किया जाता है। इसके अतिरिक्त, यह उपयोगकर्ता की पसंदीदा लोकेल को कुकी में सहेजने में सक्षम बनाता है।

(वैकल्पिक) चरण 8: अपने मेटाडेटा का अंतर्राष्ट्रीयकरण

यदि आप अपने मेटाडेटा, जैसे कि अपने पृष्ठ के शीर्षक का अंतर्राष्ट्रीयकरण करना चाहते हैं, तो आप Next.js द्वारा प्रदान किए गए generateMetadata फ़ंक्शन का उपयोग कर सकते हैं। फ़ंक्शन के अंदर अपने मेटाडेटा का अनुवाद करने के लिए getTranslation फ़ंक्शन का उपयोग करें।

src/app/[locale]/layout.tsx or src/app/[locale]/page.tsx

import {  type IConfigLocales,  getTranslation,  getMultilingualUrls,} from "intlayer";import type { Metadata } from "next";import type { LocalPromiseParams } from "next-intlayer";export const generateMetadata = async ({  params,}: LocalPromiseParams): Promise<Metadata> => {  const { locale } = await params;  const t = <T>(content: IConfigLocales<T>) => getTranslation(content, locale);  /**   * सभी लोकेल के लिए सभी URL युक्त एक ऑब्जेक्ट उत्पन्न करता है।   *   * उदाहरण:   * ```ts   *  getMultilingualUrls('/about');   *   *  // रिटर्न करता है   *  // {   *  //   en: '/about',   *  //   fr: '/fr/about',   *  //   es: '/es/about',   *  // }   * ```   */  const multilingualUrls = getMultilingualUrls("/");  return {    title: t<string>({      en: "My title",      fr: "Mon titre",      es: "Mi título",      hi: "मेरा शीर्षक",    }),    description: t({      en: "My description",      fr: "Ma description",      es: "Mi descripción",      hi: "मेरा विवरण",    }),    alternates: {      canonical: multilingualUrls[locale as keyof typeof multilingualUrls],      languages: { ...multilingualUrls, "x-default": "/" },    },    openGraph: {      url: multilingualUrls[locale],    },  };};// ... बाकी कोड

मेटाडेटा अनुकूलन के बारे में अधिक जानें आधिकारिक Next.js दस्तावेज़ पर।

(वैकल्पिक) चरण 9: आपके sitemap.xml और robots.txt का अंतर्राष्ट्रीयकरण

अपने sitemap.xml और robots.txt का अंतर्राष्ट्रीयकरण करने के लिए, आप Intlayer द्वारा प्रदान किए गए getMultilingualUrls फ़ंक्शन का उपयोग कर सकते हैं। यह फ़ंक्शन आपके साइटमैप के लिए बहुभाषी URL उत्पन्न करने की अनुमति देता है।

src/app/sitemap.ts

import { getMultilingualUrls } from "intlayer";import type { MetadataRoute } from "next";const sitemap = (): MetadataRoute.Sitemap => [  {    url: "https://example.com",    alternates: {      languages: { ...getMultilingualUrls("https://example.com") },    },  },  {    url: "https://example.com/login",    alternates: {      languages: { ...getMultilingualUrls("https://example.com/login") },    },  },  {    url: "https://example.com/register",    alternates: {      languages: { ...getMultilingualUrls("https://example.com/register") },    },  },];export default sitemap;

src/app/robots.ts

import type { MetadataRoute } from "next";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const robots = (): MetadataRoute.Robots => ({  rules: {    userAgent: "*",    allow: ["/"],    disallow: getAllMultilingualUrls(["/login", "/register"]),  },  host: "https://example.com",  sitemap: `https://example.com/sitemap.xml`,});export default robots;

साइटमैप अनुकूलन के बारे में अधिक जानें आधिकारिक Next.js दस्तावेज़ पर। robots.txt अनुकूलन के बारे में अधिक जानें आधिकारिक Next.js दस्तावेज़ पर।

(वैकल्पिक) चरण 10: अपनी सामग्री की भाषा बदलें

अपनी सामग्री की भाषा बदलने के लिए, Next.js में अनुशंसित तरीका Link घटक का उपयोग करके उपयोगकर्ताओं को उपयुक्त स्थानीयकृत पृष्ठ पर पुनर्निर्देशित करना है। Link घटक पृष्ठ के पूर्व-प्राप्ति को सक्षम करता है, जो पूर्ण पृष्ठ पुनः लोड से बचने में मदद करता है।

src/components/LocaleSwitcher.tsx

"use client";import type { FC } from "react";import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocale } from "next-intlayer";import Link from "next/link";export const LocaleSwitcher: FC = () => {  const { locale, pathWithoutLocale, availableLocales } = useLocale();  const { setLocaleCookie } = useLocaleCookie();  return (    <div>      <button popoverTarget="localePopover">{getLocaleName(locale)}</button>      <div id="localePopover" popover="auto">        {availableLocales.map((localeItem) => (          <Link            href={getLocalizedUrl(pathWithoutLocale, localeItem)}            hrefLang={localeItem}            key={localeItem}            aria-current={locale === localeItem ? "page" : undefined}            onClick={() => setLocaleCookie(localeItem)}          >            <span>              {/* लोकेल - जैसे FR */}              {localeItem}            </span>            <span>              {/* अपनी लोकेल में भाषा - जैसे Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* वर्तमान लोकेल में भाषा - जैसे Francés जब वर्तमान लोकेल Locales.SPANISH पर सेट हो */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* अंग्रेजी में भाषा - जैसे French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        ))}      </div>    </div>  );};

दस्तावेज़ संदर्भ:
useLocale हुक
getLocaleName हुक
getLocalizedUrl हुक
getHTMLTextDir हुक
hrefLang विशेषता
lang विशेषता
dir विशेषता
aria-current विशेषता

(वैकल्पिक) चरण 11: एक स्थानीयकृत लिंक घटक बनाना

यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन का नेविगेशन वर्तमान लोकेल का सम्मान करता है, आप एक कस्टम Link घटक बना सकते हैं। यह घटक स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है, ताकि। उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पृष्ठ पर जाने के लिए एक लिंक पर क्लिक करता है, तो उन्हें /about के बजाय /fr/about पर पुनः निर्देशित किया जाता है।

यह व्यवहार कई कारणों से उपयोगी है:

SEO और उपयोगकर्ता अनुभव: स्थानीयकृत URL खोज इंजनों को भाषा-विशिष्ट पृष्ठों को सही ढंग से अनुक्रमित करने में मदद करते हैं और उपयोगकर्ताओं को उनकी पसंदीदा भाषा में सामग्री प्रदान करते हैं।
संगति: एप्लिकेशन में स्थानीयकृत लिंक का उपयोग करके, आप यह सुनिश्चित करते हैं कि नेविगेशन वर्तमान लोकेल के भीतर बना रहे, अप्रत्याशित भाषा स्विच को रोकता है।
रखरखाव: URL के प्रबंधन को एकल घटक में केंद्रीकृत करके, आप अपने कोडबेस को बनाए रखने और अपने एप्लिकेशन के बढ़ने के साथ विस्तारित करने में आसान बनाते हैं।

नीचे TypeScript में एक स्थानीयकृत Link घटक का कार्यान्वयन दिया गया है:

src/components/Link.tsx

"use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import type { PropsWithChildren, FC } from "react";/** * यह जांचने के लिए उपयोगिता फ़ंक्शन कि क्या दिया गया URL बाहरी है। * यदि URL http:// या https:// से शुरू होता है, तो इसे बाहरी माना जाता है। */export const checkIsExternalLink = (href?: string): boolean =>  /^https?:\/\//.test(href ?? "");/** * एक कस्टम लिंक घटक जो वर्तमान लोकेल के आधार पर href विशेषता को अनुकूलित करता है। * आंतरिक लिंक के लिए, यह URL को लोकेल के साथ प्रीफिक्स करने के लिए `getLocalizedUrl` का उपयोग करता है (जैसे, /fr/about)। * यह सुनिश्चित करता है कि नेविगेशन समान लोकेल संदर्भ के भीतर बना रहे। */export const Link: FC<PropsWithChildren<NextLinkProps>> = ({  href,  children,  ...props}) => {  const { locale } = useLocale();  const isExternalLink = checkIsExternalLink(href.toString());  // यदि लिंक आंतरिक है और एक मान्य href प्रदान किया गया है, तो स्थानीयकृत URL प्राप्त करें।  const hrefI18n: NextLinkProps["href"] =    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;  return (    <NextLink href={hrefI18n} {...props}>      {children}    </NextLink>  );};

यह कैसे काम करता है

बाहरी लिंक का पता लगाना:
सहायक फ़ंक्शन checkIsExternalLink यह निर्धारित करता है कि कोई URL बाहरी है या नहीं। बाहरी लिंक अपरिवर्तित छोड़ दिए जाते हैं क्योंकि उन्हें स्थानीयकरण की आवश्यकता नहीं होती है।
वर्तमान लोकेल प्राप्त करना:
useLocale हुक वर्तमान लोकेल प्रदान करता है (जैसे, fr फ्रेंच के लिए)।
URL का स्थानीयकरण:
आंतरिक लिंक (यानी, गैर-बाहरी) के लिए, getLocalizedUrl का उपयोग स्वचालित रूप से URL को वर्तमान लोकेल के साथ प्रीफिक्स करने के लिए किया जाता है। इसका मतलब है कि यदि आपका उपयोगकर्ता फ्रेंच में है, तो /about को href के रूप में पास करने से यह /fr/about में बदल जाएगा।
लिंक लौटाना:
घटक स्थानीयकृत URL के साथ एक <a> तत्व लौटाता है, यह सुनिश्चित करता है कि नेविगेशन लोकेल के अनुरूप हो।

अपने एप्लिकेशन में इस Link घटक को एकीकृत करके, आप एक सुसंगत और भाषा-जागरूक उपयोगकर्ता अनुभव बनाए रखते हैं, जबकि बेहतर SEO और उपयोगिता का लाभ भी उठाते हैं।

(वैकल्पिक) चरण 12: अपने बंडल आकार को अनुकूलित करें

next-intlayer का उपयोग करते समय, डिफ़ॉल्ट रूप से प्रत्येक पृष्ठ के लिए शब्दकोश बंडल में शामिल होते हैं। बंडल आकार को अनुकूलित करने के लिए, Intlayer एक वैकल्पिक SWC प्लगइन प्रदान करता है जो मैक्रोज़ का उपयोग करके useIntlayer कॉल को बुद्धिमानी से बदलता है। यह सुनिश्चित करता है कि शब्दकोश केवल उन पृष्ठों के बंडल में शामिल हों जो वास्तव में उनका उपयोग करते हैं।

इस अनुकूलन को सक्षम करने के लिए, @intlayer/swc पैकेज इंस्टॉल करें। एक बार इंस्टॉल हो जाने पर, next-intlayer स्वचालित रूप से प्लगइन का पता लगाएगा और उसका उपयोग करेगा:

bash

npm install @intlayer/swc --save-dev

नोट: यह अनुकूलन केवल Next.js 13 और उच्चतर के लिए उपलब्ध है।

नोट: यह पैकेज डिफ़ॉल्ट रूप से स्थापित नहीं होता है क्योंकि SWC प्लगइन अभी भी Next.js पर प्रयोगात्मक हैं। यह भविष्य में बदल सकता है।

TypeScript कॉन्फ़िगर करें

Intlayer TypeScript का लाभ उठाने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल वृद्धि का उपयोग करता है।

alt text

सुनिश्चित करें कि आपकी TypeScript कॉन्फ़िगरेशन में स्वचालित रूप से उत्पन्न प्रकार शामिल हैं।

tsconfig.json

{  // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन  "include": [    // ... आपकी मौजूदा TypeScript कॉन्फ़िगरेशन    ".intlayer/**/*.ts", // स्वचालित रूप से उत्पन्न प्रकार शामिल करें  ],}

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

Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करना अनुशंसित है। यह आपको उन्हें अपने Git रिपॉजिटरी में कमिट करने से बचने की अनुमति देता है।

ऐसा करने के लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:

.gitignore

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

आगे बढ़ें

आगे बढ़ने के लिए, आप विज़ुअल एडिटर को लागू कर सकते हैं या CMS का उपयोग करके अपनी सामग्री को बाहरी बना सकते हैं।

अगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।

दस्तावेज़ के लिए GitHub लिंक

CMS Next.js 14 और ऐप राउटर