Next.js

Magic Translate fonctionne avec les deux routeurs de Next.js. Avec l'App Router, les pages sont traduites sur le serveur, de sorte que chaque langue dispose de son propre code HTML entièrement traduit pour les moteurs de recherche.

App Router

Met tes pages dans le segment [locale] et répertorie les langues que tu souhaites proposer.

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

Puis traduis tes pages avec React SSR, en utilisant le paramètre locale comme langue.

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

Les titres et les descriptions des pages sont traduits à l'aide de la fonction de traduction.

Les composants du client qui ont besoin d'être traduits, tels que les menus interactifs, peuvent utiliser le client React. Enveloppez-les dans un MagicTranslateProvider et convertissez les paramètres régionaux par 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>
  );
}

Routeur Pages

Configurez d'abord tes paramètres régionaux en suivant le guide d'internationalisation de Next.js.

Transmet ensuite la locale déterminée par Next.js au MagicTranslateProvider. Les codes de langue de Magic Translate ne correspondent pas 1:1 aux paramètres régionaux utilisés par Next.js, alors convertissez-les avec 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>
  );
}

Ton site web est désormais traduit selon les paramètres régionaux définis par Next.js.