Next.js

Magic Translate hem Next.js Uygulama Yönlendiricisi hem de Sayfalar Yönlendiricisi ile çalışır. Uygulama Yönlendiricisi ile sayfalar sunucuda çevrilir, böylece arama motorları her dil için tamamen çevrilmiş HTML 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 yerel ayarı Next.js dosyasından MagicTranslateProvider öğesine aktarın. Magic Translate farklı dil kodları kullanır, bu nedenle yerel ayarı 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.