Next.js

Magic Translate, Next.js dosyasının her iki yönlendiricisi ile çalışır. Uygulama Yönlendiricisi ile sayfalar sunucuda çevrilir, böylece her dil arama motorları için kendi tamamen çevrilmiş HTML'sini alır.

Uygulama Yönlendiricisi

Sayfalarınızı [locale] segmentine koyun ve sunmak istediğiniz dilleri listeleyin.

// app/[locale]/layout.tsx
const locales = ['en', 'de', 'fr', 'ja'];

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export default async function LocaleLayout({
  children,
  params
}: {
  children: React.ReactNode;
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;

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

Ardından, dil olarak locale parametresini kullanarak sayfalarınızı React SSR ile çevirin.

// app/[locale]/page.tsx
import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function HomePage({
  params
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const { T } = createLocalizedT(translate, locale);

  return (
    <h1>
      <T>Welcome to our website</T>
    </h1>
  );
}

Sayfa başlıkları ve açıklamaları çeviri işlevi ile çevrilir.

Etkileşimli menüler gibi çevirilere ihtiyaç duyan istemci bileşenleri React istemcisini kullanabilir. Bunları bir MagicTranslateProvider içine sarın ve yerel ayarı utsLocaleToLanguage ile dönüştürün.

'use client';

import {
  MagicTranslateProvider,
  utsLocaleToLanguage
} from '@magic-translate/react';

export function Providers({
  locale,
  children
}: {
  locale: string;
  children: React.ReactNode;
}) {
  return (
    <MagicTranslateProvider
      apiKey={process.env.NEXT_PUBLIC_MAGIC_TRANSLATE_API_KEY!}
      language={utsLocaleToLanguage(locale)}
    >
      {children}
    </MagicTranslateProvider>
  );
}

Sayfalar Yönlendirici

Önce Next.js uluslararas ılaştırma kılavuzunu izleyerek yerel ayarlarınızı oluşturun.

Ardından belirlenen Next.js yerel ayarını MagicTranslateProvider öğesine iletin. Magic Translate 'in dil kodları, Next.js dosyasının kullandığı yerel ayarlarla 1:1 eşlemez, bu nedenle bunları utsLocaleToLanguage ile dönüştürün.

// pages/_app.tsx
import type { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import {
  MagicTranslateProvider,
  utsLocaleToLanguage
} from '@magic-translate/react';

export default function MyApp({ Component, pageProps }: AppProps) {
  const { locale } = useRouter();

  return (
    <MagicTranslateProvider
      apiKey="<your-api-key>"
      language={utsLocaleToLanguage(locale)}
    >
      <Component {...pageProps} />
    </MagicTranslateProvider>
  );
}

Web siteniz artık Next.js dosyasının belirlediği yerel ayarlara göre çevrilmiştir.