अंतर्राष्ट्रीयकरण (i18n) के साथ Intlayer और Next.js का उपयोग करते हुए पेज राउटर के साथ शुरुआत करें

Intlayer क्या है?

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

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

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

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

पेज राउटर का उपयोग करते हुए Next.js एप्लिकेशन में Intlayer सेट अप करने के लिए चरण-दर-चरण गाइड

चरण 1: निर्भरताएँ स्थापित करें

अपना पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:

npm install intlayer next-intlayer

• intlayer

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

• next-intlayer

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

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

उन भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ जो आपका एप्लिकेशन समर्थन करता है:

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 कॉन्फ़िगरेशन को संशोधित करें:

import { withIntlayer } from "next-intlayer/server";/** @type {import('next').NextConfig} */const nextConfig = {  // आपका मौजूदा Next.js कॉन्फ़िगरेशन};export default withIntlayer(nextConfig);

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

चरण 4: स्थानीयता का पता लगाने के लिए मिडलवेयर कॉन्फ़िगर करें

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

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

matcher पैरामीटर को अपने एप्लिकेशन के रूट्स से मेल खाने के लिए अनुकूलित करें। अधिक विवरण के लिए, Next.js दस्तावेज़ पर matcher को कॉन्फ़िगर करने के बारे में पढ़ें।

चरण 5: डायनामिक स्थानीय रूट्स परिभाषित करें

उपयोगकर्ता की स्थानीयता के आधार पर स्थानीयकृत सामग्री प्रदान करने के लिए डायनामिक रूटिंग लागू करें।

1. स्थानीयता-विशिष्ट पेज बनाएँ:

   अपने मुख्य पेज फ़ाइल का नाम बदलें ताकि [locale] डायनामिक सेगमेंट शामिल हो।

   bash

   mv src/pages/index.tsx src/pages/[locale]/index.tsx

2. स्थानीयकरण को संभालने के लिए _app.tsx अपडेट करें:

   अपने _app.tsx को Intlayer प्रदाताओं को शामिल करने के लिए संशोधित करें।

   src/pages/_app.tsx

   import type { FC } from "react";import type { AppProps } from "next/app";import { IntlayerClientProvider } from "next-intlayer";const App = FC<AppProps>({ Component, pageProps }) => {  const { locale } = pageProps;  return (    <IntlayerClientProvider locale={locale}>      <Component {...pageProps} />    </IntlayerClientProvider>  );}export default MyApp;

3. getStaticPaths और getStaticProps सेट करें:

   अपने [locale]/index.tsx में, विभिन्न स्थानीयताओं को संभालने के लिए पाथ्स और प्रॉप्स परिभाषित करें।

   src/pages/[locale]/index.tsx

   import type { FC } from "react";import type { GetStaticPaths, GetStaticProps } from "next";import { type Locales, getConfiguration } from "intlayer";const HomePage: FC = () => <div>{/* आपकी सामग्री यहाँ */}</div>;export const getStaticPaths: GetStaticPaths = () => {  const { internationalization } = getConfiguration();  const { locales } = internationalization;  const paths = locales.map((locale) => ({    params: { locale },  }));  return { paths, fallback: false };};export const getStaticProps: GetStaticProps = ({ params }) => {  const locale = params?.locale as string;  return {    props: {      locale,    },  };};export default HomePage;

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

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

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

import { t, type Dictionary } from "intlayer";const homeContent = {  key: "home",  content: {    title: t({      en: "Welcome to My Website",      fr: "Bienvenue sur mon site Web",      es: "Bienvenido a mi sitio web",      hi: "मेरी वेबसाइट में आपका स्वागत है",    }),    description: t({      en: "Get started by editing this page.",      fr: "Commencez par éditer cette page.",      es: "Comience por editar esta página.",      hi: "इस पेज को संपादित करके शुरू करें।",    }),  },} satisfies Dictionary;export default homeContent;

For more information on declaring content, refer to the content declaration guide.

Step 7: Utilize Content in Your Code

Access your content dictionaries throughout your application to display translated content.

import type { FC } from "react";import { useIntlayer } from "next-intlayer";import { ComponentExample } from "@components/ComponentExample";const HomePage: FC = () => {  const content = useIntlayer("home");  return (    <div>      <h1>{content.title}</h1>      <p>{content.description}</p>      <ComponentExample />      {/* Additional components */}    </div>  );};// ... Rest of the code, including getStaticPaths and getStaticPropsexport default HomePage;

import type { FC } from "react";import { useIntlayer } from "next-intlayer";export const ComponentExample: FC = () => {  const content = useIntlayer("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 हुक के बारे में अधिक जानने के लिए, दस्तावेज़ देखें।

(Optional) Step 8: Internationalize Your Metadata

To internationalize metadata such as page titles and descriptions, use the getStaticProps function in conjunction with Intlayer's getTranslation function.

import { GetStaticPaths, GetStaticProps } from "next";import { type IConfigLocales, getTranslation, Locales } from "intlayer";import { useIntlayer } from "next-intlayer";interface HomePageProps {  locale: string;  metadata: Metadata;}const HomePage = ({ metadata }: HomePageProps) => {  // Metadata can be used in the head or other components as needed  return (    <div>      <Head>        <title>{metadata.title}</title>        <meta name="description" content={metadata.description} />      </Head>      {/* Additional content */}    </div>  );};export const getStaticProps: GetStaticProps = async ({ params }) => {  const locale = params?.locale as string;  const t = <T,>(content: IConfigLocales<T>) => getTranslation(content, locale);  const metadata = {    title: t({      en: "My Website",      fr: "Mon Site Web",      es: "Mi Sitio Web",      hi: "मेरी वेबसाइट",    }),    description: t({      en: "Welcome to my website.",      fr: "Bienvenue sur mon site Web.",      es: "Bienvenido a mi sitio web.",      hi: "मेरी वेबसाइट पर आपका स्वागत है।",    }),  };  return {    props: {      locale,      metadata,    },  };};export default HomePage;// ... Rest of the code including getStaticPaths

(Optional) Step 9: Change the Language of Your Content

To allow users to switch languages dynamically, use the setLocale function provided by the useLocale hook.

import {  Locales,  getHTMLTextDir,  getLocaleName,  getLocalizedUrl,} from "intlayer";import { useLocalePageRouter } from "next-intlayer";import { type FC } from "react";import Link from "next/link";const LocaleSwitcher: FC = () => {  const { locale, pathWithoutLocale, availableLocales, setLocale } =    useLocalePageRouter();  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={(e) => {              e.preventDefault();              setLocale(localeItem);            }}          >            <span>              {/* Locale - e.g. FR */}              {localeItem}            </span>            <span>              {/* Language in its own Locale - e.g. Français */}              {getLocaleName(localeItem, locale)}            </span>            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>              {/* Language in current Locale - e.g. Francés with current locale set to Locales.SPANISH */}              {getLocaleName(localeItem)}            </span>            <span dir="ltr" lang={Locales.ENGLISH}>              {/* Language in English - e.g. French */}              {getLocaleName(localeItem, Locales.ENGLISH)}            </span>          </Link>        ))}      </div>    </div>  );};

The useLocalePageRouter API is the same as useLocale. To Learn more about the useLocale hook, refer to the documentation.

Documentation references:

• getLocaleName hook
• getLocalizedUrl hook
• getHTMLTextDir hook
• hrefLang attribute
• lang attribute
• dir attribute
• aria-current attribute

(Optional) Step 10: Creating a Localized Link Component

To ensure that your application’s navigation respects the current locale, you can create a custom Link component. This component automatically prefixes internal URLs with the current language, so that. For example, when a French-speaking user clicks on a link to the "About" page, they are redirected to /fr/about instead of /about.

This behavior is useful for several reasons:

• SEO and User Experience: Localized URLs help search engines index language-specific pages correctly and provide users with content in their preferred language.
• Consistency: By using a localized link throughout your application, you guarantee that navigation stays within the current locale, preventing unexpected language switches.
• Maintainability: Centralizing the localization logic in a single component simplifies the management of URLs, making your codebase easier to maintain and extend as your application grows.

Below is the implementation of a localized Link component in TypeScript:

"use client";import { getLocalizedUrl } from "intlayer";import NextLink, { type LinkProps as NextLinkProps } from "next/link";import { useLocale } from "next-intlayer";import { forwardRef, PropsWithChildren, type ForwardedRef } from "react";/** * Utility function to check whether a given URL is external. * If the URL starts with http:// or https://, it's considered external. */export const checkIsExternalLink = (href?: string): boolean =>  /^https?:///.test(href ?? "");/** * A custom Link component that adapts the href attribute based on the current locale. * For internal links, it uses `getLocalizedUrl` to prefix the URL with the locale (e.g., /fr/about). * This ensures that navigation stays within the same locale context. */export const Link = forwardRef<  HTMLAnchorElement,  PropsWithChildren<NextLinkProps>>(({ href, children, ...props }, ref: ForwardedRef<HTMLAnchorElement>) => {  const { locale } = useLocale();  const isExternalLink = checkIsExternalLink(href.toString());  // If the link is internal and a valid href is provided, get the localized URL.  const hrefI18n: NextLinkProps["href"] =    href && !isExternalLink ? getLocalizedUrl(href.toString(), locale) : href;  return (    <NextLink href={hrefI18n} ref={ref} {...props}>      {children}    </NextLink>  );});Link.displayName = "Link";

How It Works

• Detecting External Links:
  The helper function checkIsExternalLink determines whether a URL is external. External links are left unchanged because they do not need localization.

• Retrieving the Current Locale:
  The useLocale hook provides the current locale (e.g., fr for French).

• Localizing the URL:
  For internal links (i.e., non-external), getLocalizedUrl is used to automatically prefix the URL with the current locale. This means that if your user is in French, passing /about as the href will transform it to /fr/about.

• Returning the Link:
  The component returns an <a> element with the localized URL, ensuring that navigation is consistent with the locale.

By integrating this Link component across your application, you maintain a coherent and language-aware user experience while also benefitting from improved SEO and usability.

Configure TypeScript

Intlayer use module augmentation to get benefits of TypeScript and make your codebase stronger.

Ensure your TypeScript configuration includes the autogenerated types.

{  // ... Your existing TypeScript configurations  "include": [    // ... Your existing TypeScript configurations    ".intlayer/**/*.ts", // Include the auto-generated types  ],}

Git Configuration

To keep your repository clean and avoid committing generated files, it's recommended to ignore files created by Intlayer.

Add the following lines to your .gitignore file:

# Ignore the files generated by Intlayer.intlayer

Additional Resources

• Intlayer Documentation: GitHub Repository
• Dictionary Guide: Dictionary
• Configuration Documentation: Configuration Guide

By following this guide, you can effectively integrate Intlayer into your Next.js application using the Page Router, enabling robust and scalable internationalization support for your web projects.

Go Further

To go further, you can implement the visual editor or externalize your content using the CMS.