Next.js

Magic Translate bekerja dengan kedua router Next.js. Dengan App Router, halaman diterjemahkan di server, sehingga setiap bahasa mendapatkan HTML terjemahan lengkap untuk mesin pencari.

Router Aplikasi

Letakkan halaman Anda di bawah segmen [locale] dan daftar bahasa yang ingin Anda tawarkan.

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

Kemudian terjemahkan halaman Anda dengan React SSR, menggunakan parameter locale sebagai bahasa.

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

Judul halaman dan deskripsi diterjemahkan dengan fungsi penerjemahan.

Komponen klien yang membutuhkan terjemahan, seperti menu interaktif, dapat menggunakan klien React. Bungkus mereka dalam MagicTranslateProvider dan konversi lokal dengan 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 Halaman

Pertama siapkan lokal Anda dengan mengikuti panduan internasionalisasi Next.js.

Kemudian berikan lokal Next.js yang ditentukan ke MagicTranslateProvider. Kode bahasa Magic Translate tidak memetakan 1:1 ke lokal yang digunakan Next.js, jadi konversikan dengan 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>
  );
}

Situs web Anda sekarang diterjemahkan berdasarkan lokal yang ditentukan Next.js.