Next.js

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

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 địa phương Next.js được xác định đến MagicTranslateProvider. Mã ngôn ngữ của Magic Translate không ánh xạ 1:1 với các địa phương mà Next.js sử dụng, vì vậy hãy chuyển đổi chú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.