Next.js

Magic Translate funciona tanto con el enrutador de aplicaciones Next.js como con el enrutador Pages. Con el App Router, las páginas se traducen en el servidor, por lo que los motores de búsqueda reciben el HTML totalmente traducido para cada idioma.

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 de Next.js al MagicTranslateProvider. Magic Translate usa códigos de idioma diferentes, así que convierte la configuración regional 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.