리액트 서버 컴포넌트

Magic Translate 리액트 서버 컴포넌트를 완벽하게 지원해.콘텐츠가 서버에서 번역되므로 검색 엔진과 사용자는 클라이언트 측 자바스크립트 없이 번역된 HTML을 이용할 수 있어.

설치

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

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

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

셋업

번역 기능을 한 번 설정해 줘. 예를 들어 lib/translate.ts.API 키를 환경 변수에 보관해.

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

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

API 키가 아직 없으면 Magic Translate 가입해서 얻어.

서버 구성 요소 번역

createLocalizedT 번역 함수를 한 가지 언어로 바인딩하고 <T> 구성 요소와 t() 함수를 반환해.Language 또는 de, 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>
  );
}

모든 페이지가 같은 번역 기능을 공유하기 때문에 번역은 전체 앱에서 일괄 처리되고 캐시돼.

단일 컴포넌트의 경우, createServerT 한 번의 호출로 모든 것을 설정해.해당 호출 내에서만 캐싱돼.

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

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

리액트 SSR의 <T> 컴포넌트는 리액트 서버 컴포넌트에서만 작동해.클라이언트 컴포넌트에서는 리액트 클라이언트를 대신 써.

구성 요소별 언어 선택

createT 는 언어를 prop 사용하는 <T> 구성 요소를 반환해.언어가 컴포넌트마다 다를 때 유용해.

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>;

모든 <T> 구성 요소가 클라이언트 <T> 구성 요소와 동일한 옵션 (예: formality) 을 받아들여.

예제 프로젝트

깃허브에서 SSR 프로젝트 예시를 찾을 수 있어.