Next.js

Magic Translate hoạt động với cả bộ định tuyến ứng dụng Next.js và bộ định tuyến Pages. Với App Router, các trang được dịch trên máy chủ, vì vậy các công cụ tìm kiếm nhận được HTML được dịch đầy đủ cho từng ngôn ngữ.

Bộ định tuyến ứng dụng

Đặt các trang của bạn dưới một phân đoạn [locale] và liệt kê các ngôn ngữ bạn muốn cung cấp.

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

Sau đó dịch các trang của bạn bằng React SSR, sử dụng tham số locale làm ngôn ngữ.

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

Tiêu đề trang và mô tả được dịch với chức năng dịch.

Các thành phần máy khách cần bản dịch, chẳng hạn như menu tương tác, có thể sử dụng React client. Gói chúng trong một MagicTranslateProvider và chuyển đổi miền địa phương bằng 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>
  );
}

Pages Router

Đầu tiên thiết lập địa phương của bạn bằng cách làm theo hướng dẫn quốc tế hóa Next.js.

Sau đó chuyển miền địa phương từ Next.js sang MagicTranslateProvider. Magic Translate sử dụng các mã ngôn ngữ khác nhau, vì vậy hãy chuyển đổi miền địa phương bằng 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>
  );
}

Trang web của bạn hiện được dịch dựa trên địa phương mà Next.js xác định.