Komponen Server React

Magic Translate sepenuhnya mendukung React Server Components. Konten diterjemahkan di server, sehingga mesin pencari dan pengguna mendapatkan terjemahan HTML tanpa JavaScript sisi klien.

Instalasi

# using npm
npm i @magic-translate/react-ssr

# using yarn
yarn add @magic-translate/react-ssr

# using pnpm
pnpm add @magic-translate/react-ssr

Pengaturan

Siapkan fungsi penerjemahan sekali, misalnya di lib/translate.ts. Simpan kunci API Anda dalam variabel lingkungan.

import { setupT } from '@magic-translate/react-ssr';

export const translate = setupT({
  apiKey: process.env.MAGIC_TRANSLATE_API_KEY!
});

Jika Anda belum memiliki kunci API, daftar Magic Translate untuk mendap atkannya.

Menerjemahkan komponen server

createLocalizedT mengikat fungsi translate ke satu bahasa dan mengembalikan komponen <T> dan fungsi t(). Ini menerima Language atau lokal apa pun seperti de atau pt-BR.

import { createLocalizedT } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

export default async function AboutPage() {
  const { T, t } = createLocalizedT(translate, 'de');

  return (
    <article>
      <h1>
        <T>About us</T>
      </h1>
      <img src="/team.jpg" alt={await t('Our team in Zurich')} />
    </article>
  );
}

Karena setiap halaman berbagi fungsi terjemahan yang sama, terjemahan dikelompokkan dan di-cache di seluruh aplikasi Anda.

Untuk satu komponen, createServerT mengatur semuanya dalam satu panggilan. Itu hanya menyimpan dalam panggilan itu.

import { createServerT } from '@magic-translate/react-ssr';

const { T } = createServerT({
  apiKey: process.env.MAGIC_TRANSLATE_API_KEY!,
  locale: 'zh'
});

Komponen <T> dari React SSR hanya berfungsi di React Server Components. Dalam komponen klien, gunakan klien React sebagai gant inya.

Memilih bahasa per komponen

createT mengembalikan komponen <T> yang mengambil bahasa sebagai prop. Ini berguna ketika bahasa berbeda dari komponen ke komponen.

import { createT, Language } from '@magic-translate/react-ssr';
import { translate } from '@/lib/translate';

const T = createT(translate);

const Greeting = async () => <T lang={Language.ZH}>Please translate me!</T>;

Semua komponen <T> menerima opsi yang sama dengan komponen <T> klien, seperti formality.

Contoh proyek

Anda dapat menemukan contoh proyek SSR di GitHub.