Next.js

Magic Translate работает с обоими маршрутизаторами Next.js. С помощью App Router страницы переводятся на сервер, поэтому каждый язык получает свой собственный полностью переведенный HTML-код для поисковых систем.

Маршрутизатор приложений

Разместите свои страницы в сегмент [locale] и перечислите языки, которые вы хотите предложить.

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

Затем переведите свои страницы с помощью React SSR, используя параметр locale в качестве языка.

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

Заголовки и описания страниц переводятся с помощью функции перевода.

Клиентские компоненты, нуждающиеся в переводе, например интерактивные меню, могут использовать клиент React. Оберните их в MagicTranslateProvider и преобразуйте локаль с помощью utsLocaleToLanguage.

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

Маршрутизатор страниц

Сначала настройте локали, следуя руководству по интернационализации Next.js.

Затем передайте определенную локаль Next.js в MagicTranslateProvider. Языковые коды Magic Translate не соответствуют языкам, используемым Next.js, в соотношении 1:1, поэтому преобразуйте их с помощью utsLocaleToLanguage.

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

Теперь ваш веб-сайт переведен на основе локали, заданной Next.js.