Next.js

Magic Translate funciona con los dos enrutadores de Next.js. Con el App Router, las páginas se traducen en el servidor, por lo que cada idioma tiene su propio HTML totalmente traducido para los motores de búsqueda.

Enrutador de aplicaciones

Coloca tus páginas en el segmento [locale] y haz una lista de los idiomas que quieres ofrecer.

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

Luego traduce tus páginas con React SSR, utilizando el 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>
  );
}

Los títulos y las descripciones de las páginas se traducen con la función de traducción.

Los componentes del cliente que necesitan traducciones, como los menús interactivos, pueden utilizar el cliente React. Envuélvelos en un MagicTranslateProvider y convierte la configuración regional en 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>
  );
}

Router Pages

Primero configura tus ubicaciones siguiendo la guía de internacionalización de Next.js.

Luego pasa la configuración regional determinada por Next.js al MagicTranslateProvider. Los códigos de idioma de Magic Translate no asignan 1:1 a las ubicaciones que utiliza Next.js, así que conviértelos con 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>
  );
}

Tu sitio web ya está traducido según la configuración regional que determine Next.js.