Next.js

Magic Translate funktioniert sowohl mit dem Next.js App Router als auch mit dem Pages Router. Mit dem App Router werden Seiten auf dem Server übersetzt, sodass Suchmaschinen vollständig übersetztes HTML für jede Sprache erhalten.

App-Router

Stelle deine Seiten unter ein [locale]-Segment und liste die Sprachen auf, die du anbieten möchtest.

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

Übersetze dann deine Seiten mit React SSR und verwende den locale-Parameter als Sprache.

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

Seitentitel und Beschreibungen werden mit der Übersetzungsfunktion übersetzt.

Client-Komponenten, die Übersetzungen benötigen, wie interaktive Menüs, können den React-Client verwenden. Wickle sie in MagicTranslateProvider ein und konvertiere das Gebietsschema mit 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>
  );
}

Seitenrouter

Richte zuerst deine Gebietsschemas ein, indem du dem Internationalisierungsleitfaden von Next.js folgst.

Dann übergebe das Gebietsschema von Next.js an MagicTranslateProvider. Magic Translate verwendet verschiedene Sprachcodes, also konvertiere das Gebietsschema mit 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>
  );
}

Deine Website wird jetzt auf der Grundlage des Gebietsschemas übersetzt, das Next.js bestimmt.