Next.js

Magic Translate funciona com os dois roteadores do Next.js. Com o App Router, as páginas são traduzidas no servidor, para que cada idioma tenha seu próprio HTML totalmente traduzido para os mecanismos de pesquisa.

Roteador de aplicativos

Coloque suas páginas em um segmento [locale] e liste os idiomas que você deseja oferecer.

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

Em seguida, traduza suas páginas com o React SSR, usando o parâmetro locale como idioma.

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

Os títulos e descrições das páginas são traduzidos com a função de tradução.

Os componentes do cliente que precisam de traduções, como menus interativos, podem usar o cliente React. Envolva-os em MagicTranslateProvider e converta a localidade com 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>
  );
}

Roteador de páginas

Primeiro, configure suas localidades seguindo o guia de internacionalização do Next.js.

Em seguida, passe a localidade Next.js determinada para o MagicTranslateProvider. Os códigos de idioma do Magic Translate não mapeiam 1:1 para os locais que o Next.js usa, então converta-os com 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>
  );
}

Seu site agora está traduzido com base na localidade que o Next.js determina.