Better i18n'i Next.js ile nasıl kurarım?

`@better-i18n/next` paketi, Next.js App Router ile entegre olur ve ISR destekli CDN tabanlı mesaj çekme özelliği sunar. Bu kılavuzla adım adım kurun.

8 dk okumaOrta Düzey

@better-i18n/next paketi, Next.js App Router ile entegre olur ve arka planda next-intl kullanır. ISR desteğiyle CDN destekli mesaj çekme özelliği ekler.

Kurulum

bun add @better-i18n/next next-intl

Adım 1: i18n yapılandırmasını oluşturun

src/i18n.ts dosyasını oluşturun:

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: yerel dil listesini saatte bir yenile
  messagesRevalidateSeconds: 30,   // ISR: mesajları her 30 saniyede yenile
});

Yerel dil öneki seçenekleri

Seçenek	Varsayılan dil URL'si	Diğer dil URL'si
`as-needed`	`/about`	`/tr/about`
`always`	`/en/about`	`/tr/about`
`never`	`/about`	`/about` (çerez/başlıktan dil)

Adım 2: İstek yapılandırmasını kurun

src/i18n/request.ts dosyasını oluşturun:

import { i18n } from '@/i18n';

export default i18n.requestConfig;

Bu, next-intl'e her istek için mesajların nasıl yükleneceğini söyler. Arka planda, ISR önbelleklemesiyle Better i18n CDN'den çeker.

Adım 3: Middleware ekleyin

src/middleware.ts dosyasını oluşturun:

import { i18n } from '@/i18n';

export default i18n.betterMiddleware();

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

Middleware:

Kullanıcının tercih ettiği yerel dili Accept-Language başlığından algılar
Uygun yerel dil önekine yönlendirir
Aşağı akış kullanımı için x-better-locale başlığını ayarlar

Adım 4: Provider ekleyin

Kök düzeninizde (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>
  );
}

Adım 5: Çevirileri kullanın

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>
  );
}

Ortam değişkenleri

# .env.local
BETTER_I18N_PROJECT=acme/dashboard

Genel anahtar SDK'ya gömülüdür — salt okunur CDN erişimi için API anahtarına gerek yoktur.

ISR önbelleğe alma nasıl çalışır?

SDK dahili olarak iki createI18nCore örneği oluşturur:

Manifest core — mevcut yerel dilleri çeker, manifestRevalidateSeconds saniyede yeniler (varsayılan: 3600s)
Messages core — çevirileri çeker, messagesRevalidateSeconds saniyede yeniler (varsayılan: 30s)

Bu, yeni çeviriler yayınladıktan sonra Next.js uygulamanızın yeniden derleme gerektirmeden ~30 saniye içinde bunları aldığı anlamına gelir.

Sonraki adımlar

Bu makale yardımcı oldu mu?

CLI'yi nasıl kurar ve projemi nasıl tararım?