Next.js

Magic Translate bekerja dengan Router Aplikasi Next.js dan Router Pages. Dengan App Router, halaman diterjemahkan di server, sehingga mesin pencari menerima HTML yang diterjemahkan sepenuhnya untuk setiap bahasa.

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 dari Next.js ke MagicTranslateProvider. Magic Translate menggunakan kode bahasa yang berbeda, jadi konversikan lokal 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.