Better i18n को Next.js के साथ कैसे सेट अप करूँ?

`@better-i18n/next` पैकेज Next.js App Router के साथ इंटीग्रेट होता है और ISR सपोर्ट के साथ CDN-powered message fetching जोड़ता है। इस गाइड से चरण-दर-चरण सेट अप करें।

8 मिनट पठनमध्यम

@better-i18n/next पैकेज Next.js App Router के साथ इंटीग्रेट होता है और हुड के नीचे next-intl का उपयोग करता है। यह ISR सपोर्ट के साथ CDN-powered message fetching जोड़ता है।

इंस्टॉलेशन

bun add @better-i18n/next next-intl

चरण 1: i18n कॉन्फ़िगरेशन बनाएँ

src/i18n.ts बनाएँ:

import { createI18n } from '@better-i18n/next';

export const i18n = createI18n({
  project: 'acme/dashboard',
  defaultLocale: 'en',
  localePrefix: 'as-needed', // 'always' | 'as-needed' | 'never'
  manifestRevalidateSeconds: 3600, // ISR: locale सूची हर घंटे revalidate करें
  messagesRevalidateSeconds: 30,   // ISR: messages हर 30s revalidate करें
});

Locale prefix विकल्प

विकल्प	डिफ़ॉल्ट locale URL	अन्य locale URL
`as-needed`	`/about`	`/tr/about`
`always`	`/en/about`	`/tr/about`
`never`	`/about`	`/about` (cookie/header से locale)

चरण 2: Request config सेट अप करें

src/i18n/request.ts बनाएँ:

import { i18n } from '@/i18n';

export default i18n.requestConfig;

यह next-intl को बताता है कि प्रत्येक request के लिए messages कैसे लोड करें। हुड के नीचे, यह ISR caching के साथ Better i18n CDN से fetch करता है।

चरण 3: Middleware जोड़ें

src/middleware.ts बनाएँ:

import { i18n } from '@/i18n';

export default i18n.betterMiddleware();

export const config = {
  matcher: ['/((?!api|_next|.*\\..*).*)'],
};

Middleware:

Accept-Language header से उपयोगकर्ता की पसंदीदा locale detect करता है
उचित locale prefix पर redirect करता है
downstream उपयोग के लिए x-better-locale header सेट करता है

चरण 4: Provider जोड़ें

अपने root layout (src/app/[locale]/layout.tsx) में:

import { NextIntlClientProvider } from 'next-intl';
import { getMessages } from 'next-intl/server';

export default async function LocaleLayout({
  children,
  params: { locale },
}) {
  const messages = await getMessages();

  return (
    <html lang={locale}>
      <body>
        <NextIntlClientProvider messages={messages}>
          {children}
        </NextIntlClientProvider>
      </body>
    </html>
  );
}

चरण 5: अनुवाद उपयोग करें

import { useTranslations } from 'next-intl';

export function WelcomeBanner() {
  const t = useTranslations('common');

  return (
    <div>
      <h1>{t('welcome_title')}</h1>
      <p>{t('welcome_description')}</p>
    </div>
  );
}

Environment variables

# .env.local
BETTER_I18N_PROJECT=acme/dashboard

Public key SDK में embedded है — read-only CDN access के लिए API key की ज़रूरत नहीं।

ISR caching कैसे काम करता है

SDK आंतरिक रूप से दो createI18nCore instance बनाता है:

Manifest core — उपलब्ध locales fetch करता है, manifestRevalidateSeconds के अनुसार revalidate करता है (डिफ़ॉल्ट: 3600s)
Messages core — translations fetch करता है, messagesRevalidateSeconds के अनुसार revalidate करता है (डिफ़ॉल्ट: 30s)

इसका मतलब है कि नए translations publish करने के बाद, आपका Next.js app बिना rebuild के ~30 सेकंड में उन्हें प्राप्त करता है।

अगले कदम

क्या यह लेख सहायक था?

पिछला

CLI कैसे सेट अप करूँ और अपना प्रोजेक्ट कैसे स्कैन करूँ?